前言
工作中遇到了打包文件后需要手动修改接口基础 URL 的需求，避免URL更改后需要重复打包的麻烦，涉及到开发环境，生产环境等一些知识，在此总结一下。项目使用的vue版本为2.x，vue-cli版本为 3.12.1。
1 在项目根目录下 配置 package.json 文件
根据官网解释：你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量
其实意思就是：当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入，如下面添加的第一行代码中，当执行 npm run dev 在开发环境运行项目时，会去加载 第2节 中的 .env.dev及 .env.prd 文件中的环境变量 NODE_ENV、VUE_APP_WEBSOCKET_URL。然后开发模式中 process.env.NODE_ENV值为 development，生产环境下则为 production。在main.js 中配置对应的变量。--open表示自动打开默认浏览器。
package.json：
...
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
+ "dev": "vue-cli-service serve --mode dev --open",
+ "prd": "vue-cli-service build --mode prd --report"
}
...
2 在项目根目录下创建 .env.dev 及 .env.prd 文件
.env.dev：
NODE_ENV=development
VUE_APP_WEBSOCKET_URL=ws://192.168.3.13:8082/imonitor
.env.prd：
NODE_ENV=production
3 根目录的 public 文件夹中
创建打包后生产环境需要的 CONFIG.js 文件，在此文件配置 URL 即可
const CONFIG = {
websocketURL: 'ws://192.168.3.13:8082/imonitor',
}
html 模板文件中引入 CONFIG.js 文件，作用是在 main.js 中使用 CONFIG.js 中的 websocketURL 键值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <script src="<%= BASE_URL %>CONFIG.js" ></script>
<title>28beds</title>
</head>
<body>
<noscript>
<strong>We're sorry but ecg_pc doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4 src 目录的 main.js 中
此时开发环境下 组件中获取的变量 this.$websocketURL 的值就对应 .env.dev 文件中的 VUE_APP_WEBSOCKET_URL变量。生产环境中从 CONFIG.websocketURL 中获取，并且可以通过修改 CONFIG.websocketURL 的值刷新页面实时配置 URL。
...
+ let websocketURL
+ if (process.env.NODE_ENV === 'development') {
+ websocketURL = process.env.VUE_APP_WEBSOCKET_URL
+ } else if (process.env.NODE_ENV === 'production') {
+ websocketURL = CONFIG.websocketURL
+ }
+ Vue.prototype.$websocketURL = websocketURL
...
5 组件中使用变量
我是在 xxx.vue 组件中连接的 websocket，通过this.$websocketURL 获取到Vue原型对象上的属性即可，代码如下：
...
this.ws = new WebSocket(this.$websocketURL)
...
6 结语
写到这里基本就差不多了，我这个项目中是在组件中使用的 URL，如果是在 axios.js 的配置文件中也是和 main.js 中的代码差不多的，这里也贴一下吧：
...
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = CONFIG.baseURL
}
...
参考文献：cli.vuejs.org/zh/guide/mo…
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！