vuecli多环境配置

# 前言

Vue项目我们最终都会有一个上线的过程，而且有的正规的公司会有测试环境和生产环境，我们需要分别配置一些启动参数。

# 配置环境参数

在项目根目录下新建.env.dev和.env.prod分别用于表示测试环境和生产环境的配置文件

.env.dev

NODE_ENV=development
VUE_APP_SERVER=http://127.0.0.1:8880

1
2

.env.prod

NODE_ENV=production
VUE_APP_SERVER=http://127.0.0.1:8880

1
2

# 配置启动命令

package.json

这个我只选取了主要的部分

"scripts": {
    "serve-dev": "vue-cli-service serve --mode dev",
    "serve-prod": "vue-cli-service serve --mode prod",
    "build-dev": "vue-cli-service build --mode dev",
    "build-prod": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
},

1
2
3
4
5
6
7

如何更改端口

Vue Cli启动时默认的端口为：8080，我们如果遇到端口冲突或者需要更改端口的时候，该如何设置呢？

{
    "serve-dev": "vue-cli-service serve --mode dev --port 8081"
}

1
2
3

只需在启动命令参数后面加上--port 端口号即可

# 验证环境

我们在项目的main.js/ts文件中添加代码，且在amount前

console.log('环境: ', process.env.NODE_ENV)

我们重新启动项目，并去控制台查看，输出内容，此时内容为：development，即成功。

编辑

上次更新: 2021/12/14, 22:48:09

← ios的flutter上手全局使用antdv图标组件→