环境变量

在开发的时候一般会有三个环境：开发环境 测试环境 线上（生产）环境

vue 中有个概念就是模式，默认vue cli 有三个模式

• development开发环境模式用于 vue-cli-service serve

• production生产环境模式用于 vue-cli-service build 和 vue-cli-service test:e2e

• test测试环境模式用于 vue-cli-service test:unit

但是往往开发的时候可能不止有三种：

• 本地环境（local）

• 开发环境（development）

• 测试环境（devtest）

• 预发布环境（beta）

• 生产环境（production）

创建不同环境变量文件

通过为.env文件增加后缀来设置某个模式下特有的环境变量。

1、在项目根路径下设置 新建对应文件.env.development(开发环境文件)  .env.production(生产环境文件) .env.devtest(测试环境文件)

2、在每个文件写入如下内容（VUE_APP_随便写）

VUE_APP_XIAOMING = "开发模式"

package.json环境对应的执行语句

"scripts": {
    "serve": "vue-cli-service serve",//开发模式
    "build": "vue-cli-service build",//生产模式
    "dev_test_build": "vue-cli-service build --mode development_test",//测试模式
    "lint": "vue-cli-service lint"

  },

使用变量process.env.你的内容即可得到

mounted()=>{

    console.log(process.env.VUE_APP_XIAOMING);

   

}

打包生产环境

1、npm run build 会生成一个dist文件夹  我们点开之后像运行html一样运行项目

2、配置生产环境 （1）在vue.config.js中设置publicpath："./" (2)把路由模式设置为hash

3、重新build