vue3打包部署小知识

·  阅读 2323
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中设置

`publicPath: process.env.NODE_ENV === 'production' ? '/location/' : '/',`

这代表在把开发环境架设在根路径上,而生产环境则是在/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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改