Vuejs 免重复打包在开发及生产环境下的接口URL配置-一一网

前言

工作中遇到了打包文件后需要手动修改接口基础 URL 的需求，避免URL更改后需要重复打包的麻烦，涉及到开发环境，生产环境等一些知识，在此总结一下。项目使用的vue版本为2.x，vue-cli版本为 3.12.1。

※注：本文代码区域每行开头的“+”表示新增，“-”表示删除，“M”表示修改；代码中的“…”表示省略。

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表示自动打开默认浏览器。

注意 –mode 后面的 dev 对应 .env.dev文件的后缀名, 必须保持一致才能加载到文件中的环境变量。

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 文件

NODE_ENV

如果在环境中有默认的 NODE_ENV，你应该移除它或在运行 vue-cli-service 命令的时候在对应的环境文件中明确地设置 NODE_ENV。

请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

.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)
...
复制代码

打包后要手动改变URL更改 CONFIG.js 文件然后刷新页面即可（如果没有生效试试 ctrl+f5 绕过缓存强制刷新），项目中其他 token 账号密码啥的根据业务来配置即可，这里未给出。

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…

文章版权归作者所有，未经允许请勿转载。

THE END

前端