vue cli3.0打包上线不同环境

1. cli3.0支持".env"文件配置，在项目的根目录下配置".env"文件，根据不同的环境命名不同的文件名称，如：测试上线环境的.env文件命名为".env.release"，文件内容如下：

NODE_ENV = 'production'
VUE_APP_TITLE = 'release'

可以直接定义NODE_ENV = ‘release’ ，但是打包出来dist的文件和NODE_ENV = ‘production’ 生产环境的文件有区别，所有还是将NODE_ENV定义为production，代表生产环境，再在生产环境的基础上区分不同的线上环境，这样打包出来的文件没有区别的。dist文件具体不同如下图所示：

2. 在package.json的文件中给scripts对象添加属性，如下代码：

 "release": "vue-cli-service build --mode release",

3. 判断地址使用：

//线上测试环境
if(process.env.VUE_APP_TITLE === 'release') {//线上测试环境的执行代码nameOld = '释放'
}

4. 执行打包生成dist文件（run候面跟的名称是第2步在package.json的文件中给scripts对象添加的属性名称）：

npm run release

好了，完成不同环境的打包结束了

vue cli3.0打包上线不同环境相关推荐

可视化构建工具探索之Vue Cli3.0 阿里飞冰
Vue Cli3.0可视化构建工具--Vue UI 一.安装环境安装了最新的Vue CLI.打开Terminal,输入: npm install -g @vue/cli or yarn global ...
Vue CLI3.0 中使用jQuery 和 Bootstrap
Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Boo ...
01-路由跳转安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
01-路由跳转安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题参考文章: (1)01-路由跳转安装less this.$router.re ...
vue cli3 一键 build 区分测试环境和正式环境
vue cli3 打包 build 区分测试环境和正式环境通过自定义环境变量文件进行配置思路: 默认情况下,执行 npm run serve 会以 development 的模式启动执行 npm ...
vue cli3.0 引入eslint 结合vscode使用
ESLint 它的目标是提供一个插件化的javascript代码检测工具. 官网地址最近一个项目里,最开始使用cli3.0搭建的时候没有默认选用eslint,导致现在有的人使用其他编辑器,就会出现格 ...
vue后台管理系统打包上线到node
项目准备 1. 配置 alias 别名使用vue-cli开发项目,最大特色是组件化.组件中频繁引用其他组件或插件.我们可以把一些常用的路径定义成简短的名字.方便开发中使用. //加载path模块 c ...
Vue Cli3 项目打包优化
1.项目优化实现步骤: 清除生产环境中的console.log语句生成打包报告,根据报告优化项目第三方库启用CDN 路由懒加载首页内容定制 2.执行build 2.1 清除生产环境中的cons ...
vue cli3.0 修改配置文件
问题:资源找不到新版的vue-cli构建出来的项目目录没有build和config文件夹,需要改输入路径的地址,需要在项目的根目录添加一个Vue.config.js. 修改资源目录 module. ...
vue cli3.0创项目报错‘This may cause things to work incorrectly. Make sure to use the same version for b’
错误: throw new Error(^Error:Vue packages version mismatch:- vue@2.6.12 (C:\Users\Administrator\AppDat ...

vue cli3.0打包上线不同环境

vue cli3.0打包上线不同环境

vue cli3.0打包上线不同环境相关推荐

最新文章

热门文章