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或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
DOM 事件流详解
2015/01/20 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
销售人员职业生涯规划范文
2014/03/01 职场文书
车辆转让协议书
2014/04/15 职场文书
元旦主持词开场白
2015/05/29 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
nginx常用配置conf的示例代码详解
2022/03/21 Servers
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers