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中为元素加上name属性的方法
May 09 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
JavaScript如何实现防止重复的网络请求的示例
Jan 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
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php实现的ping端口函数实例
2014/11/12 PHP
Yii rules常用规则示例
2016/03/15 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
荷兰超市:DEEN
2018/03/14 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
高校毕业生登记表自我鉴定
2013/11/03 职场文书
烹调加工管理制度
2014/02/04 职场文书
预备党员表决心书
2014/03/11 职场文书
保健品市场营销方案
2014/03/31 职场文书
战马观后感
2015/06/08 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL