vue3打包部署小知识

这些知识是自己的盲区，以前都比较会害怕要接触到这些，后面项目中有遇到，就先把这些小的知识点记录下来吧。有错误的地方欢迎提醒哦

1.vue.config.js之publicPath

官网描述：

Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

实际应用是这样的：

nginx中指定根路径/home/web

但是实际部署路径为子路径/home/web/location

因此我必须要在vue.config.js中设置

这代表在把开发环境架设在根路径上，而生产环境则是在/location下，这样我们就可以成功的访问页面了。

2.vue.config.js之devServer.proxy

官网描述：

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

实际应用：

在开发联调过程中，不同的接口可能对应着不同的域名或者端口号，比如

登录模块的相关接口 /verify 是http://192.168.1.101:9199，

档案模块对应的接口 /app 是https://192.168.1.111:9099,

veu.config.js中devServer.proxy我们就可以写成

devServer: {
      proxy: { '/app':{                target: 'https://192.168.1.217:9099', // /app模块                changeOrigin: true         },'/verify':{                target: 'http://192.168.1.217:9199', //verify模块                changeOrigin: true            }
}
}

那么在我们实际请求的时候

//以下请求最终实际请求地址是https://192.168.1.217:9099/app/persons/select
export function personsSelect(data) {    return request({        url: '/app/persons/select',        method: 'post',        data    })}
//以下请求最终实际请求地址是http://192.168.1.217:9199/verify/persons/select
export function login(data) {  return request({    url: baseUrl+'auth',    method: 'post',    data,    headers:{'content-type':'application/x-www-form-urlencoded'},  })}

3.nginx.conf文件简单配置

3.1 nginx指定根路径

路径：usr/local/nginx/conf/nginx.conf

location / {
            root   /home/web;              //指定项目文件放置的根路径
            index  index.html index.htm;   
        }

3.2 nignx代理

location /test {
			proxy_pass http://www.haha.com/
		}

例如访问地址为http://www.test.com/test/a.html

实际代理到的地址为www.haha.com/a.html