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 相关文章推荐
javascript web对话框与弹出窗口
Feb 22 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
BootStrap中的表单大全
Sep 07 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
JS代码简洁方式之函数方法详解
Jul 28 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 中英文语言转换类代码
2011/08/11 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
Python字符串中查找子串小技巧
2015/04/10 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
Python项目跨域问题解决方案
2020/06/22 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
运动会广播稿30字
2014/01/21 职场文书
创建文明城市标语
2014/06/16 职场文书
作风转变心得体会
2014/09/02 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
见习期个人总结
2015/03/05 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
对公司的意见和建议
2015/06/04 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android