如果有Vue的Demo 不知道怎么运行的同学可以看这里
这里只讲Win下面环境配置
温馨提示:本文只适用于vue-cli 3.0 及以上的版本哦~
------------------正文开始------------------
开发项目时,经常会需要在不同环境中切换。那么我们如何配置不同的环境变量呢?
为了更加方便消化本文章,建议先看下官方文档:
看完官方的文档如果还没有明白,可以参考本文。
在vue-cli 构建的项目中,默认有3种模式,如下图:
我个人的理解就是:
你执行npm run serve时,对应的环境就是开发环境;
你执行npm run build时,对应的环境就是生产环境。
如果你开发的项目中,不止该3种,该咋整呢?像在我开发的项目中,就有本地环境(local)、开发环境(development)、测试环境(devtest)、预发布环境(beta)、生产环境(production)。请记住我括号里面的英文。
来,左边跟我一起画个龙,在你右边儿画一道彩虹~画完了,开始进入主题了~
------------------进入主题------------------
1.创建不同环境变量文件
如官方文档所说,通过为.env文件增加后缀来设置某个模式下特有的环境变量。我这里有5个环境,所以配置了5个.env文件。如下图:
2.给.env文件添加内容
基本格式如下:
NODE_ENV=环境名称
VUE_APP_URL=对应的环境地址
如我本地环境的配置就如下图所示:
我本地是用的easy-mock模拟的数据,所以配置的地址是mock接口地址。
3.在package.json中添加不同环境对应的执行语句
如官方文档所说,可以通过传递 --mode 来配置不同的模式。我自己的项目配置如下图:
请注意我配置文件中的 serve 与build 。
4.使用
文件已创建好,配置语句也已写好。怎么用它呢?
首页你需要哪个环境,就执行哪个环境的命令语句。
比如我现在需要local环境,就执行 npm run local-serve 。如下图所示:
然后通过 process.env.NODE_ENV 获取环境名;通过 process.env.VUE_APP_URL 获取环境对应的url。
比如我们在axios请求中,就可以把它的baseURL设置为 process.env.VUE_APP_URL ,如下图所示:
后面的"/web"是根据我自己接口来的,你别也写个"/web"。
如果你不确定你自己现在是在哪个环境变量下,可以 console.log("当前环境变量:"+process.env.NODE_ENV) 和 console.log("当前环境路径:"+process.env.VUE_APP_URL) 看下。
像我的项目中就是下面这2个东东:
输出的内容就是.env.local文件里面配置的环境变量。
为了更好的理解,我们再执行一条语句, npm run serve ,看看此时的环境变量是哪个?
为什么呢?
因为 npm run serve 默认指向.env.developement,我在里面配置的环境就是上面输出的内容。.env.developement的配置如下图:
总而言之就是,你需要哪个环境变量,就 【npm run 对应的环境变量】 就完事了!
关于vue cli4.0 配置环境变量就讲到这里了~~如果有更好的建议或者疑问,欢迎留言~
问题
实际开发中,开发环境和生产环境中一些变量是不同的,比如接口地址等等,打包之前需要手动切换。
编译时
新建env.js
let baseUrl = '';
if(process.env.NODE_ENV == 'production'){
baseUrl = 'https://xxxxxxxxx';
} else if (process.env.NODE_ENV == 'development') {
baseUrl = '/api'
}
export {
baseUrl
}
process.env.NODE_ENV 是通过webpack 内置的 DefinePlugin为所有的依赖定义的变量
webpack.dev.conf.js
new webpack.DefinePlugin({
'process.env.NODE_ENV': 'development'
}),
webpack.prod.conf.js
new webpack.DefinePlugin({
'process.env.NODE_ENV': 'production'
}),
这样在项目任意文件中都能调用process.env.NODE_ENV变量,本人测试过,process并不是挂载在window变量上,猜测可能是挂载到了node的process变量。
在运行脚本编译项目的时候,会根据变量值的不同,设置不同的baseUrl。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
如果有Vue的Demo 不知道怎么运行的同学可以看这里
这里只讲Win下面环境配置
一、NodeJs安装1、下载Windows 安装包(.msi),并安装https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi2、测试nodejs是否安装成功。(npm -v)二、配置nodejs环境变量vue-cli脚手架安装设置淘宝镜像安装npm,由于npm官网镜像访问太慢,我们使用淘宝的npm镜像,在node命令窗口npm install -g cnpm --registry=https://registry.npm.taobao.org接下来就是重点了 安装vue-clicnpm install vue-cli -g三、cd 进入到我们得到的项目跟目录下,如E:\VueDemo,并执行安装。cnpm install四、接下来执行 npm run dev这时候会出现 Lisening at http://localhost:8088 会自动打开浏览器预览项目 成功!~~~~~~~~~~~~转载于:https://www.cnblogs.com/fuyu-blog/p/7850371.html
关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件
.env 全局默认配置文件,不论什么环境都会加载合并
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
关于文件内容:
注意:属性名必须以"VUE_APP_"开头,比如VUE_APP_XXX
.env:
.env.development:
关于文件的加载:
根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”
比如执行npm run serve命令,会自动加载.env.development文件
启动项目:npm run serve
再App.vue文件中添加下面测试代码打印一下process.env:
console.log(process.env)
可见NODE_ENV被改为了development,覆盖掉了.env中的全局属性
.env中的全局属性NODE_ENV、VUE_APP_URL被覆盖,
.env中的全局属性VUE_APP_PREVIEW、VUE_APP_DEFAULT_PARAM被保留