前提准备

我们需要准备一个vue项目(vue-cli3,vue-cli4)、一个nginx服务器(可有可无)

本教程讲解的是vue-router中hash模式的部署【完全适用vue-cli3、4】,vue-cli2需要进行略微改动

部署流程

  • 配置vue.config.js中的publicPath
  • 配置vue-router的模式为hashs【非常关键】
  • 使用npm run build生成dist文件夹
  • 配置nginx代理
  • 配置nginx路由

vue.config.js

如果你的项目中没有这个文件,直接在项目根目录创建它就行

1.配置publicPath

module.exports = {
    publicPath:  "./",
    outputDir:'dist',
}

vue-router

1.配置路由模式和基础路由

export default new Router({
    // history模式,需要和服务端配合才能在生产环境下正常使用
    mode: 'hash',
    routes:[]
})

npm run build

我们在vue项目根目录下运行npm run build就可以进行项目的打包了。打包后会生成dist文件夹,然后直接运行这个index.html就行(vscode要在liveserver打开它)

如果你只是想在本地看到效果的话,那就不用往下看。因为下面我分享的是nginx服务器上线的方法

nginx

1.配置nginx代理

有些时候我们需要请求一些跨域服务,在开发时,我们可以配置devServer的proxy实现跨域访问。

但是在npm run build后,我们会发现代理无效。这是因为生产环境下的文件已经脱离devServer了,所以自然代理就没有用了,所以一般生产环境代理我们使用nginx去做

location /api/{
    proxy_pass  http://121.36.94.221:6600/;
    index  index.html index.htm;
}

location /info/{
    proxy_pass  http://ckk.xiaoandcai.cn/;
    index  index.html index.htm;
}

假设我们的nginx服务器的端口号是8080,那么我们请求localhost:8080/api就相当于请求121.36.94.221:6600

这种写法和devserver配置代理的方法类似

2.配置nginx路由

location / {
    root   D:/nginx/nginx-1.20.0/html/dist;
    index  index.html index.htm;
    autoindex on;       #开启nginx目录浏览功能
    autoindex_exact_size off;   #文件大小从KB开始显示
    charset utf-8;          #显示中文
}

现在启动nginx服务器输入localhost:8080/就可以访问我们的vue项目了

Logo

前往低代码交流专区

更多推荐