需求由来:我公司项目上线发布至服务器分为三个环境分别为测试环境、预发布环境、生产环境;前期做法是项目通过脚步打包时由脚步把域名和后缀名之类的全部替换成要发布的环境所需要的,因为我公司的项目比较大由许许多多项目通过node分发集成的,后续每添加一个项目就要在发布脚步上更改替换之类的,公司运维觉得很麻烦很浪费时间,于是开会提出分模块打包。通过各种百度、谷歌终于搞定,至于怎么实现,让我们接着住下看:

第1步:安装cross-env

在项目目录下运行如下命令安装cross-env,我的ide编辑器是webstorm,可以直接在ide里的Terminal窗口中运行。

  1. npm i --save-dev cross-env

第2步:因为Vue-cli 只给我们提供了预发布环境和生产环境;这时就需要我们自己再添加一个环境以及修改各环境下的参数

在项目 config 目录下添加 stag.env.js。并且修改自带的 dev.env.js、prod.env.js 里的内容,修改后的内容如下:

1. config/dev.env.js

  1. // dev.env.js
    'use strict'
  2. const merge = require('webpack-merge')
  3. const prodEnv = require('./prod.env')
  4.  
  5. module.exports = merge(prodEnv, {
  6. NODE_ENV: '"development"'
  7. })

2. config/stag.env.js

  1. // stag.env.js
    'use strict'
  2. const merge = require('webpack-merge')
  3. const devEnv = require('./dev.env')
  4.  
  5. module.exports = merge(devEnv, {
  6. NODE_ENV: '"stag"'
  7. })

3. config/prod.env.js

  1. // prod.env.js
    'use strict'
  2. module.exports = {
  3. NODE_ENV: '"production"'
  4. }

第3步:修改项目package.json文件 

对 package.json 文件中的 scripts 内容进行个性化,添加上新定义的几种环境的打包过程,里的参数与前面的调协保持一致。

  1. // 红字部分为添加的
    "scripts": {
  2. "dev": "node build/dev-server.js",
  3. "start": "npm run dev",
  4. "build": "node build/build.js",
  5. "build:dev": "cross-env NODE_ENV=production env_config=dev node build/build.js",
  6. "build:stag": "cross-env NODE_ENV=production env_config=stag node build/build.js",
  7. "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
  8. "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
  9. "e2e": "node test/e2e/runner.js",
  10. "test": "npm run unit && npm run e2e",
  11. "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  12. },

在这里,NODE_ENV 最好都设成 production,因为在 utils.j s只做了production一种判定,亲测不会影响各环境API参数。

第4步:修改config/index.js文件中build参数    这里的参数会在 build/webpackage.prod.conf.js 中使用到

  1. build: {
  2. // 添加test pre prod 三处环境的配制
  3. devEnv: require('./dev.env'),
  4. stagEnv: require('./stag.env.js'),
  5. prodEnv: require('./prod.env'),
  6. env: require('./prod.env'),
  7. index: path.resolve(__dirname, '../dist/index.html'),
  8. assetsRoot: path.resolve(__dirname, '../dist'),
  9. assetsSubDirectory: 'static'
  10. },

第5步:在webpackage.prod.conf.js中使用构建环境参数

对 build/webpackage.prod.conf.js 文件进行修改,根据打包命令匹配env常量的生成方式。

  1. // 红字部分为修改的 绿色为修改部分
    const env = config.build[process.env.env_config+'Env']
  2. // const env = process.env.NODE_ENV === 'testing'
  3. // ? require('../config/stag.env.js')
  4. // : config.build.env

第6步:调整build/build.js

注释process.env.NODE_ENV的赋值,且修改spinner的定义,调整后的内容如下:

  1. // 红字部分为添加的 绿色为修改部分
    // process.env.NODE_ENV = 'production'
  2. const ora = require('ora')
  3. const rm = require('rimraf')
  4. const path = require('path')
  5. const chalk = require('chalk')
  6. const webpack = require('webpack')
  7. const config = require('../config')
  8. const webpackConfig = require('./webpack.prod.conf')
  9.  
  10. // const spinner = ora('building for production...')
  11. const spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
  12. spinner.start()

第7步:对项目主入口 main.js 进行域名赋值操作

建议整个项目的域名和后缀这些都统一管理了即只在一个地方进行赋值操作,其他文件不要有写死的情况  命令行分别运行npm run build:dev 、 npm run dev:stag 、npm run dev:prod  在运行打包后的文件看控制台打印的什么就知道哪个环境了

  1. // main.js 动态设置环境
  2. console.log(process.env.NODE_ENV) // 看输出的是什么就知道是哪个环境了
  3. if (process.env.NODE_ENV === 'development') {
  4. // dev环境
  5. window.localStorage.gatewayDomain = 'https://dev-ceshi.lan/'
  6. window.localStorage.cookieDomain = '.dev-ceshi.lan'
  7. } else if (process.env.NODE_ENV === 'stag') {
  8. // stag预发布环境
  9. window.localStorage.gatewayDomain = 'https://stag-ceshi.gc-life.cn/'
  10. window.localStorage.cookieDomain = '.stag-ceshi.cn'
  11. } else if (process.env.NODE_ENV === 'production') {
  12. // 生产环境
  13. window.localStorage.gatewayDomain = 'https://stag-ceshi.com/'
  14. window.localStorage.cookieDomain = '.stag-ceshi.com'
  15. }

第8步:扩展

问题抛出:当公司更换某个环境的域名和后缀时,这时就尴尬了,假如有20个项目岂不是一个一个项目去改(我公司就有这情况),这时就可以通过后台接口的形式把一些域名之类的通过接口返回前端,一样的道理只需在 main.js 或者 App.vue 里判断环境再分别调用后台接口赋值就行了。

  1.  
  1. if (process.env.NODE_ENV === 'development') {
  2. // dev环境
  3. 这里调用接口就行了在进行赋值
  4. }

第9步:测试验证: 修改config/index.js文件中assetsPublicPath参数 

  1. // 红色为修改部分
    build: {
  2. // 添加test pre prod 三处环境的配制
  3. devEnv: require('./dev.env'),
  4. stagEnv: require('./stag.env.js'),
  5. prodEnv: require('./prod.env'),
  6. env: require('./prod.env'),
  7. index: path.resolve(__dirname, '../dist/index.html'),
  8. assetsRoot: path.resolve(__dirname, '../dist'),
  9. assetsSubDirectory: 'static',
  10. assetsPublicPath: './',
  11. productionSourceMap: true,
  12. }

通过以上修改之后自己就可以在本地测试打包项目在运行index.html文件看控制套打印输出  process.env.NODE_ENV  是什么就能验证了!若打包的文件中图片不能正常显示则修改 build 文件夹下的 utils.js 添加一行代码

  1. // 红色为修改部分
    if (options.extract) {
  2. return ExtractTextPlugin.extract({
  3. use: loaders,
  4. fallback: 'vue-style-loader'
  5.    publicPath: '../../'
  6. })
  7. } else {
  8. return ['vue-style-loader'].concat(loaders)
  9. }

以上就是分模块打包所需修改的配置及内容了,亲测有效,我公司所有项目都是这样的,当你需要打包预发布环境时运行npm run build:stag  或者打包生产环境时 运行npm run build:prod 即可, 若结合请求的统一管理则更是beautiful 提高代码质量

以上所述是小编给大家介绍的Vue项目分环境打包的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。

基于Vue + webpack + Vue-cli 实现分环境打包项目的更多相关文章

  1. 前端自动分环境打包(vue和ant design)

    现实中的问题:有时候版本上线的时候,打包时忘记切换环境,将测试包推上正式服务器,那你就会被批了. 期望:在写打包的命令行的时候就觉得自己在打包正式版本,避免推包时候的,不确信自己的包是否正确. 既然有 ...

  2. vue分环境打包配置不同命令

    1.安装cross-env (cross-env能跨平台地设置及使用环境变量)cnpm/npm  i  cross-env -D 2.新建模板 红色的为相关文件 3.配置各个文件 (1)config下 ...

  3. VUE 如何分环境打包(开发/测试/生产)配置

    前言 之前小玲一直处于更新,迭代项目的状态,开发环境.测试环境.生产环境都是前辈配置好的,自己几乎没有配置过,这次做几个新项目时,面临着上线,需要分环境打包配置,于是在网上遨游了一会会,摸索着按照网上 ...

  4. Vue项目分环境打包的实现步骤

    转:https://blog.csdn.net/xinzi11243094/article/details/80521878 方法一:亲测真的有效 在项目开发中,我们的项目一般分为开发版.测试版.Pr ...

  5. [vue]webpack&vue组件工程化实践

    [vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...

  6. Vue项目根据不同运行环境打包项目

    前提 项目是直接通过 vue-cli脚手架 生成的: 假设在项目开发中,分为三个环境 -- · 测试环境· 预生产环境· 生产环境 每个环境的接口地址都是不同的,而 vue-cli 给出的环境只有 d ...

  7. 使用Maven分环境打包:dev sit uat prod

    使用Maven管理的项目,经常需要根据不同的环境打不同的包,因为环境不同,所需要的配置文件不同,比如database的连接信息,相关属性等等. 在Maven中,我们可以通过P参数和profiles元素 ...

  8. springboot分环境打包(maven动态选择环境)

    分环境打包核心点:spring.profiles.active pom.xml中添加: <profiles> <profile> <id>dev</id> ...

  9. vue3.0+vite+ts项目搭建-分环境打包(四)

    分环境打包配置 新建.env.dev(或者.env) VITE_NODE_ENV = 'dev' VITE_HOST = 'http://local.host.com' 执行yarn dev ,控制台 ...

随机推荐

  1. SAP-批量修改主数据(客户、供应商、物料)

    SAP-批量修改主数据(客户.供应商.物料) TCODE: MASS 对于批量修改主数据如客户,供应商等,可以试用一下Mass , 它所能修改的范围如下: 选定要修改的对象后,点击运行,会要求选择需要 ...

  2. Python Scrapy安装

    直接安装scrapy 各种报错,后来各种百度终于解决了,如下是亲身的经历. pip install scrapy 这样直接会报错. 第一步: 先安装wheel pip install wheel 第二 ...

  3. 【Cucumber】【命令行】

    知识点 参考:https://www.cnblogs.com/worklog/p/5253297.html cucumber的命令行选项 首先查看命令行选项.和其它命令行工具一样,cucumber提供 ...

  4. SVN服务器搭建和使用教程

    安装SVNserver 点击Next下一步,如下: 然后再点击Next项,下一步,如下: 点击[Next] 如下: Location是指VisualSVN Server的安装目录,Repository ...

  5. 恢复Intellij idea删除的文件

    恢复Intellij idea的删除文件方法: 右键单机项目名称---->Local History---->Show History 可以看到历史操作记录,右键单机想要恢复的文件---- ...

  6. LCA 模板

    关于LCA: LCA 指树上两点的公共祖先. 如何 “暴力” 找两点的 LCA : 可以先 DFS 一遍求出每个点的 dep (深度).然后从深度大的点先往上跳,跳到与另一个点相同的深度,如果还没有到 ...

  7. 1.0 poi单元格合合并及写入

    最近项目中用到poi生成Excel时,用到了单元格合并,于是参考了http://www.anyrt.com/blog/list/poiexcel.html写的文章,但是其中有些地方不是很清楚,于是自己 ...

  8. RestTemplate学习

    在学习spring cloud的时候,用到了RestTemplate,找到一篇博客,写的很好,学习转载! 文章转载自:https://blog.csdn.net/itguangit/article/d ...

  9. 动态规划-Race Car

    2018-10-26 21:06:54 问题描述: 问题求解: 方法一.BFS 首先将使用BFS进行解空间的遍历,也就是将本问题转化成了搜索问题,但是有两个地方需要注意: 1.状态保存的问题,每个位置 ...

  10. RNA Spike-in Control(转)

    Spike-in Control:添加/加入(某种物质)的对照(组)在某些情况下,待检验样本中不含待测物质或者含有但是浓度很低,为了证明自己建立的方法能对样本中待测物质进行有效的检测,可在待检样本中加 ...