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所必须要知道的一些
Mar 07 Javascript
javascript String 对象
Apr 25 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
js实现简单的验证码
Dec 25 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
vue项目中添加单元测试的方法
Jul 21 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 stream_context_create()函数的使用示例
2015/05/12 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
python中有帮助函数吗
2020/06/19 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
培训主管的岗位职责
2013/11/23 职场文书
升国旗演讲稿
2014/09/05 职场文书
党员检讨书范文
2014/12/27 职场文书
公司会议开幕词
2015/01/29 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
Python中的pprint模块
2021/11/27 Python
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技