同一个域名下部署多个前端项目，修改vue-cli 环境变量BASE_URL

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了同一个域名下部署多个前端项目，修改vue-cli 环境变量BASE_URL，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1638字，纯文字阅读大概需要3分钟。

内容图文

公司让用vue重构一个angular项目，需要可以在新旧版本间切换，慢慢过渡到只用新版本。

查询Nginx配置，得知

想要在同一个域名下部署多个前端项目，通过不同url来区分调用相应前端项目。
比如：部署项目a，项目b。想要效果如下。
浏览器输入：http://localhost:8082/a/，展示项目a。
浏览器输入：http://localhost:8082/b/，展示项目b。

这样两版共用一个域名，那么这个域名下的cookie等登陆信息就可以共用了，切换版本不用重新登录。

具体配置

location /a/ {
     alias html/app/;
     index  index.html index.htm;
     try_files $uri $uri/ /app/index.html;
}
location /b/ {
     alias html/pc/;
     index  index.html index.htm;
     try_files $uri $uri/ /pc/index.html;
}

vue router:相关配置

base

• 类型: string

• 默认值: "/"

  应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"。

base: process.env.BASE_URL,

上面代码是vue-cli自动生成的配置，看到这里我就想修改BASE_URL，通过新建.env环境变量文件

环境变量

你可以在你的项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入

只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中

　然后我在.env中修改BASE_URL，完全不起作用，随意设个VUE_APP_的变量是可以实现的，后来我发现了下面这段话，试着只修改vue.config.js 中的 publicPath

• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

vue-cli配置

publicPath

• Type: string

• Default: '/'

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

修改vue.config.js 中的 publicPath后，得以实现配置服务的基路径。

内容总结

以上是互联网集市为您收集整理的同一个域名下部署多个前端项目，修改vue-cli 环境变量BASE_URL全部内容，希望文章能够帮你解决同一个域名下部署多个前端项目，修改vue-cli 环境变量BASE_URL所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---