配置环境变量官方文档

配置环境变量的三种方式

一、通过默认文件来指定环境变量

优缺点：自动使用，不会覆盖默认环境变量

1.配置文件作用范围及命名

本地运行：.env.development
生产环境：.env.production
测试：.env.test

二、通过.env文件配置环境变量

优缺点：可以自己通过package.json自定义使用那个环境变量配置文件。

1.在根目录创建.env文件并创建变量

环境变量的命名必须是：VUE_APP_XXX
环境变量声明方式：“键=值”对

3.配置配置文件

三、在vue.config.js中直接声明环境变量

优缺点：不用单独在package.json中配置环境变量，随用随声明。但是当serve和build使用的变量不同时，需要频繁改动。

环境变量使用

1.html中使用环境变量

2.组件中使用环境变量

//...
mounted() {
	alert(process.env.VUE_APP_STATIC_URL)
}
//...

由于项目要求 部署不同的环境及目录，为了方便打包与部署，配置不同的开发环境变量与部署路径

1.创建项目

vue create demo
cd demo
npm run serve  //运行项目

2.在项目目录创建不同的环境文件 NODE_ENV = production声明开发环境，若不声明打包后的内容是 1.js… 没有混淆
.env.dev //开发环境

NODE_ENV = development
VUE_APP_BASE_API = https://www.development.com.cn //具体变量以实际项目为准

.env.test //测试环境

NODE_ENV = test
VUE_APP_BASE_API = https://www.test.com.cn //具体变量以实际项目为准

.env.pro //正式环境

NODE_ENV = production
VUE_APP_BASE_API =  https://www.production.com.cn //具体变量以实际项目为准

如果有需要配置多行变量，需以VUE_APP 开头

3.修改package.json文件中的scripts
原配置

"scripts": {
    "serve": "vue-cli-service serve",  //项目开发环境运行
    "build": "vue-cli-service build"  //项目打包
  },

修改配置

"scripts": {
        "serve": "vue-cli-service serve  --mode dev",  //运行开发环境 
        "dev": "vue-cli-service serve --mode dev", //运行开发环境
        "test": "vue-cli-service serve --mode test",  //运行测试环境
        "build": "vue-cli-service build --mode prod",  //打包正式环境
        "build:test": "vue-cli-service build --mode test", //打包测试环境
    },

重点 --mode后面的变量与文件.env.后面dev/test/prod相对应要一致

4.重启项目查看
a.启动开发环境

 npm run dev 

5.定义不同环境下的路由路径和打包路径
测试环境 需要部署到 /test 非根目录
创建vue.config.js
module.exports = {
publicPath: ‘/test/’ //直接配置
}
运行项目

npm run test

6.路由非根目录的配置

const router = new VueRouter({
  mode: 'history',
  base: process.env.NODE_ENV=='test'?'/test':'', // 也可配置process.env.BASE_URL
  routes
})

node.js 提供了环境变量，这个变量全局的，下面看看怎么用：
找到package.json 文件，在script一项里面你会看到这些东西

这些东西就是你的项目要运行的命令，比如你要运行dev环境

npm run dev

此时执行的是 “dev”: “cross-env NODE_ENV=development vue-cli-service serve --open” 这条指令
那么 NODE_ENV就是你设置的环境变量，这里面你还可以加BASE_URL……随便加，那么加了我们通过node下的 process.env的对象来获取我们的环境变量

const NODE_ENV = process.env.NODE_ENV
const BASE_URL= process.env.BASE_URL

对了要用环境变量最好装一个cross-env的插件，这个是方便window和mac用同样的方法获取环境变量

npm install cross-env

这里有个小问题，我在设置BASE_URL时，我把IP地址写进去，发现ip地址被截取掉了，不知道咋回事，希望大佬指教