知识点梳理(我踩过的坑)
- vue项目在运行时会根据启动的指令来运行不同的环境
npm run server
运行的是开发环境development
npm run build
运行的是生产环境producion
,并将项目打包 - .env文件是环境配置,会在项目运行时被加载,且只会被加载一次,单独的环境配置文件会覆盖全局环境配置的相同属性
- .env全局环境配置,.env.development开发环境配置,.env.production生产环境配置,不允许胡乱命名
- .env文件中的默认属性有NODE_ENV和VUE_APP_ENV
- 添加的属性名必须以 VUE_APP_ 开头,如:VUE_APP_XXX
- 可以通过process.env在任何地方访问到当前环境配置属性
上面看懂了下面就不必看了
小白式流程(废话一堆)
首先看图,这是新建好的项目
打开package.json,里面scripts是运行脚本的意思,其中有两个默认的运行环境。
npm run server
运行的是开发环境development
npm run build
运行的是生产环境producion
,并将项目打包
根目录下添加新的环境配置文件
.env文件是全局的,放公共属性,看你需求
单独的环境配置文件会覆盖全局环境配置的相同属性
//.env.development 配置,记得改请求路径,按需求加入你需要的配置项
NODE_ENV='development'
VUE_APP_ENV='development'
VUE_APP_BASE_URL='https://elm.whz.org' //开发环境下的请求路径,你不加VUE_APP_BASE前缀就访问不到!!!
//.env.production 配置 //同上,随便配,路径改成你需要的路径
NODE_ENV='production'
VUE_APP_ENV='production'
VUE_APP_BASE_URL='https://elm.whz2.org'
//.env.staging 同上
NODE_ENV='production'
VUE_APP_ENV='staging'
VUE_APP_BASE_URL='https://elm.whz3.org'
接下来有两种思路
1.你在需要使用环境属性的地方使用process.env引入该属性,例如baseUrl
//优点:拿到就能用
//缺点:如果想更改属性,必须重启服务
let baseUrl=process.env.VUE_APP_BASE_URL
2.新建config文件夹,新建一个env.js文件,代码如下
const development = {
//可以加更多环境属性
baseUrl: 'https://elm.cangdu.org',
}
const production = {
baseUrl: 'https://elm.cangdu.org',
}
const staging = {
baseUrl: "https://elm.cangdu.org"
}
//动态设置环境属性,不必重启项目了
let env;
if (process.env.VUE_APP_ENV === 'development') {
//开发环境下的执行操作
env = development
} else if (process.env.VUE_APP_ENV === 'staging') {
//测试环境下的执行操作
env = staging
} else {
//生产环境下的执行操作
env = production
}
export default env
在其他组件引入env,就能使用环境属性;
这样写的好处是:你在更改环境配置信息时,不用重启项目了