vue-cli项目配置多环境的详细操作过程


Posted in Javascript onOctober 30, 2018

vue-cli 默认只提供了 dev 和 prod 两种环境。但其实正真的开发流程可能还会多一个 sit 或者 stage 环境,

就是所谓的测试环境和预发布环境。所以我们就要简单的修改一下代码。其实很简单就是设置不同的环境变量

详细操作过程

1.在 package.json 中添加 test 命令

"scripts": {
  "dev": "cross-env NODE_ENV=online node build/dev-server.js --host 192.168.1.8",
  "local": "cross-env NODE_ENV=local node build/dev-server.js",
  "build": "node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
  "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js"
 },

2.创建环境文件 (BASE_API 为接口的主地址)

/config/dev.env.js (开发环境)

module.exports = {
 NODE_ENV: '"development"',
 ENV_CONFIG: '"dev"',
 BASE_API: '"http://192.168.1.7"' // 这里是后端和后端做开发测试
}
/config/sit.env.js (测试环境,测试服)

module.exports = {
 NODE_ENV: '"production"',
 ENV_CONFIG: '"sit"',
 BASE_API: '"http://test.todomore.cn"'
}
/config/prod.env.js (生产环境,正式服)

module.exports = {
 NODE_ENV: '"production"',
 ENV_CONFIG: '"prod"',
 BASE_API: '"http://www.todomore.cn"'
}

3.修改 config/index.js

var path = require("path")

module.exports = {
 // 开发环境配置
 dev: {
  assetsSubDirectory: "static",
  assetsPublicPath: "/",
  port: 7127,
  // context: [
  //  //代理路径
  //  "/shopping",
  // ],
  // proxypath: "http://localhost:7127",
  cssSourceMap: false
 },
 // 生产环境配置
 build: {
  index: path.resolve(__dirname, "../../../public/store/index.html"),
  assetsRoot: path.resolve(__dirname, "../../../public/store"),
  assetsSubDirectory: "static",
  assetsPublicPath: "/store/",
  productionSourceMap: true,
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false,
  productionGzipExtensions: ["js", "css"]
 }
}

4.安装插件(如果 package.json 里面本来就有 cross-env 的话就不用这一步了)

npm install --save cross-env

修改 webpack.prod.conf

原来的 env 是引入的 prod.env:

// const env = require('../config/prod.env')

修改为:

const env = require("../config/" + process.env.env_config + ".env")

6.修改提示语

跟 build:pre 不同的是 node_env 需要指向 config 中的文件名称,与之对应的是 env_config 的名字。

这样便可以打包成功了。

build.js 中有一段描述:

js const spinner = ora("building for prod....")

可以动态修改为:

js const spinner = ora("building for " + process.env.env_config)

使用命令

# 生产环境(正式服)
npm run build:prod
# 测试环境(测试服)
npm run build:sit

生成在根目录 dist 的配置

index: path.resolve(__dirname, '../dist/index.html'), // 入口文件路径
  assetsRoot: path.resolve(__dirname, '../dist'), // 生成在/dist
  assetsSubDirectory: 'static',          // 资源子目录
  assetsPublicPath: '/',             // 资源公共路径

总结

以上所述是小编给大家介绍的vue-cli项目配置多环境的详细操作过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
vue debug 二种方法
Sep 16 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
js实现翻牌小游戏
Jul 31 Javascript
小程序实现侧滑删除功能
Jun 25 Javascript
详解微信小程序中组件通讯
Oct 30 #Javascript
vue移动端项目缓存问题实践记录
Oct 29 #Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 #Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 #Javascript
vue-router权限控制(简单方式)
Oct 29 #Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 #Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 #Javascript
You might like
根德YB400的电路分析
2021/03/02 无线电
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
PHP 断点续传实例详解
2017/11/11 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
javascript String 的扩展方法集合
2008/06/01 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
python3简单实现微信爬虫
2015/04/09 Python
八大排序算法的Python实现
2021/01/28 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
基于python plotly交互式图表大全
2019/12/07 Python
Python简单实现区域生长方式
2020/01/16 Python
Python中私有属性的定义方式
2020/03/05 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Python 解析简单的XML数据
2020/07/24 Python
python 元组和列表的区别
2020/12/30 Python
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
安全月活动总结
2014/05/05 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
务虚会发言材料
2014/12/25 职场文书
师德培训心得体会2016
2016/01/09 职场文书