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 相关文章推荐
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
js重写方法的简单实现
Jul 10 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
angularjs性能优化的方法
Sep 05 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
原生js+css实现tab切换功能
Sep 17 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
PHP 工厂模式使用方法
2010/05/18 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
python解析xml模块封装代码
2014/02/07 Python
Python中对列表排序实例
2015/01/04 Python
Python编程argparse入门浅析
2018/02/07 Python
Python装饰器用法实例总结
2018/05/26 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
keras slice layer 层实现方式
2020/06/11 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
预备党员思想汇报范文
2013/12/29 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
授权收款委托书
2014/09/23 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android