vue-cli3出来很久了，之前一直使用vue-cli2的配置，并且区分了生产和开发环境，自己的理解，环境分两大类，开发环境 和生产环境,最近升级到了vue-cli4当然改动并不大。

升级的主要原因嘛，第一个就是赶赶时髦，二个就是vue-cli2里面使用异步组件的时候，打包出来的都是1.js,2.js这样子的名字就非常不友好了，根本不知道这是哪个组件。vue-cli3借助更新版的webpack呢，就可以显示组件名称了，这样比较好，

还有一个就是vue-cli3配置起来相对是比较简单的，在一个文件里面全部搞定了，不用像vue-cli2一样，好几个文件要改，那么多文件谁知道谁是谁啊，是吧。

对于命令来说，就是dev和build的区别，

一般都会有预发布和正式生产两个环境区别

预发布 就使用预发布的接口

正式的就使用正式的接口

对于程序员来说，本地测试也需要测试预发布的接口和生产的接口，上线也需要区分上到预发布或者上到生产

所以根据这些的不同，分成了两大部分，每一部分都分了预发和正式

具体可以参照下图

根据这些不同呢，就在package.json中区分了四种情况

然后在项目根目录下新建4个对应的文件就好

环境变量下最好手动指定一下NOED_ENV，因为开发环境不会压缩js，而打包之后需要压缩js

，然后在api中就可以读取到具体的mode了

vue.config.js中

之前写的太简单了，现在需要加上静态资源cdn引入，这样可以显著减小包的体积，下面贴下具体的设置vue.config.js的代码吧

 const path = require('path')

 // 项目部署路径的BASE_URL

 const publicPath = process.env.VUE_APP_PUBLISH_PATH

 // 项目的打包输出目录

 const outputDir = process.env.VUE_APP_OUTPUT_DIR

 const isProduction = process.env.NODE_ENV === 'production';

 const cdn = {

     // 开发环境

     dev: {

         css: [],

         js: [],

     },

     // 生产环境

     build: {

         css: [],

         js: [

             "https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",

             "https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js",

             "https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js",

             "https://cdn.jsdelivr.net/npm/vue-lazyload@1.3.3/vue-lazyload.min.js"

         ],

     },

 };

 // 添加样式自动化导入

 const addStyleResourceLoader = webpackConfig => {

     const fileTypes = ['less', 'sass', 'scss']

     const cssModules = ['vue-modules', 'vue', 'normal-modules', 'normal']

     const targetRules = fileTypes.reduce((rulesArr, fileType) => rulesArr.concat(

         cssModules.map(cssModule => webpackConfig.module.rule(fileType).oneOf(cssModule))

     ), [])

     targetRules.forEach(rule => {

         rule.use('style-resource').loader('style-resources-loader').options({

             patterns: [

                 path.resolve(__dirname, `./src/style/*.${rule.names[0]}`)

             ]

         })

     })

 }

 // 添加包分析工具

 const addBundleAnalyzer = webpackConfig => {

     if (process.argv[2] === 'build' && process.env.npm_config_report) {

         const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

         webpackConfig.plugin('webpack-bundle-analyzer').use(BundleAnalyzerPlugin)

     }

 }

 // 优化打包行为 —— 移除打包后的 js.map 文件和 console 输出

 // 注意，只能移除默认形式的 console; 无法移除形如 let log = console.log; log(111) 这种形式的输出

 const upgradeMinimizer = webpackConfig => {

     webpackConfig.optimization.minimizer('terser').tap(args => {

         args[0].terserOptions.compress.drop_console = true;

         args[0].terserOptions.compress.drop_debugger = true;

         args[0].terserOptions.compress.pure_funcs = ['console.log']

         return args

     })

 }

 module.exports = {

     lintOnSave: false, // 关闭eslint

     productionSourceMap: false, // 关闭生产环境的sourcemap

     publicPath: './',

     outputDir: process.env.outputDir, // 生成文件的目录名称

     chainWebpack: config => {

         config.plugin('html').tap((args) => {

             if (isProduction) {

                 args[0].cdn = cdn.build;

             }

             return args;

         });

         addStyleResourceLoader(config)

         addBundleAnalyzer(config)

         upgradeMinimizer(config)

     },

     configureWebpack: config => {

         if (isProduction) {

             config.externals = {

                 'vue': 'Vue',

                 'vue-router': 'VueRouter',

                 'axios': 'axios'

             }

         }

     }

 }

下面是index.html的写法

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <link rel="icon" href="<%= BASE_URL %>favicon.ico">

     <title><%= htmlWebpackPlugin.options.title %></title>

 </head>

 <body>

     <noscript>

         <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.

             Please enable it to continue.</strong>

     </noscript>

     <div id="app"></div>

     <!-- built files will be auto injected -->

     <% for (var i in

         htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>

     <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>

     <% } %>

 </body>

 </html>

然后在package.js编写脚本

 {

   "name": "test-cli4",

   "version": "0.1.0",

   "private": true,

   "scripts": {

     "dev": "vue-cli-service serve --mode development",

     "dev-prod": "vue-cli-service serve --mode development_prod",

     "build-dev": "vue-cli-service build  --mode production_pre",

     "build-prod": "vue-cli-service build --mode production"

   },

   "dependencies": {

     "core-js": "^3.6.4",

     "vue": "^2.6.11",

     "vue-router": "^3.1.6"

   },

   "devDependencies": {

     "@vue/cli-plugin-babel": "~4.3.0",

     "@vue/cli-plugin-eslint": "~4.3.0",

     "@vue/cli-plugin-router": "~4.3.0",

     "@vue/cli-service": "~4.3.0",

     "@vue/eslint-config-prettier": "^6.0.0",

     "babel-eslint": "^10.1.0",

     "eslint": "^6.7.2",

     "eslint-plugin-prettier": "^3.1.1",

     "eslint-plugin-vue": "^6.2.2",

     "node-sass": "^4.12.0",

     "prettier": "^1.19.1",

     "sass-loader": "^8.0.2",

     "style-resources-loader": "^1.3.3",

     "vue-template-compiler": "^2.6.11"

   }

 }

更vue-cli2一样，如果需要显示打包之后的分析，直接后面接上 --report即可

好了，大功告成！！！

说个题外话，项目开发经常是cli2和cli3并存的，官方呢，非常贴心的提供了方法让这两者共存，官方说法如下，自己实践了下，还是挺好用的，靠谱

npm install -g @vue/cli-init

# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同

vue init webpack my-project

此时，就可以愉快的开发啦

vue-cli3区分开发和生产环境的更多相关文章

  1. 在package.json里面的script设置环境变量，区分开发及生产环境。注意mac与windows的设置方式不一样

    在package.json里面的script设置环境变量,区分开发及生产环境. 注意mac与windows的设置方式不一样. "scripts": { "publish- ...

  2. JPush Android 推送如何区分开发、生产环境

    我们 Android 开发者在使用极光推送时可能会发现,在通过官方控制台进行推送时.只有 iOS 区分了开发和生产环境,而 Android 则没有.但实际开发中又确实经常需要针对开发和生产环境分别来推 ...

  3. webpack开发与生产环境配置

    前言 作者去年就开始使用webpack, 最早的接触就来自于vue-cli.那个时候工作重点主要也是 vue 的使用,对webpack的配置是知之甚少,期间有问题也是询问大牛 @吕大豹.顺便说一句,对 ...

  4. spring boot--日志、开发和生产环境切换、自定义配置(环境变量)

    Spring Boot日志常用配置: # 日志输出的地址:Spring Boot默认并没有进行文件输出,只在控制台中进行了打印 logging.file=/home/zhou # 日志级别 debug ...

  5. webpack根据开发与生产环境配置不同变量--webpack.DefinePlugin

    webpack有一个DefinePlugin接口,可以实现根据开发与生产环境配置不同变量.范例如下: 需求:开发环境请求baseUrl = '':生产环境请求 baseUrl = 'http://lo ...

  6. Node JS后端项目开发与生产环境总结

    原文地址:Node JS后端项目开发与生产环境总结 Node JS常用后端框架有express.koa.sails.国产框架有个egg js,已经在cnode投入生产了,还有个think js,类似t ...

  7. AppBoxFuture实战: 如何同步开发与生产环境的模型

      框架是用抽象模型驱动的方式来生成应用系统的,这样可以将这些模型序列化为相应的模型包文件,通过反序列化导入至其他部署环境内,从而实现开发环境与生产环境的同步,包括对应的数据库结构的同步.下面通过示例 ...

  8. 用前端姿势玩docker【四】基于docker快速构建webpack的开发与生产环境

    目录 用前端姿势玩docker[一]Docker通俗理解常用功能汇总与操作埋坑 用前端姿势玩docker[二]dockerfile定制镜像初体验 用前端姿势玩docker[三]基于nvm的前端环境构建 ...

  9. vue cli3配置开发环境、测试环境、生产（线上）环境

    cli3创建vue项目是精简版的少了build和config这2个文件,所以配置开发环境.测试环境.生产环境的话需要自己创建env文件. 需要注意2点: 1.cli2创建项目生成的config文件里的 ...

随机推荐

  1. Xapian实战（一）：环境搭建 + 简介

    1. 参考资料 http://xapian.org/docs/install.html Xapian的存储系统.性能以及检索模型等 2. 安装 1) xapian # ./configure --pr ...

  2. DeepWalk论文精读：（1）解决问题&相关工作

    模块1 1. 研究背景 随着互联网的发展,社交网络逐渐复杂化.多元化.在一个社交网络中,充斥着不同类型的用户,用户间产生各式各样的互动联系,形成大小不一的社群.为了对社交网络进行研究分析,需要将网络中 ...

  3. POJ 2188 Cow Laundry

    Cow Laundry Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1376 Accepted: 886 Descriptio ...

  4. D - Pearls HDU - 1300 斜率dp+二分

    D - Pearls HDU - 1300 这个题目也是一个比较裸的斜率dp,依照之前可以推一下这个公式,这个很好推 这个注意题目已经按照价格升序排列序,所以还是前缀和还是单调的. sum[i] 表示 ...

  5. Codeforces Round #577 (Div. 2) D. Treasure Hunting

    Codeforces Round #577 (Div. 2)  D. Treasure Hunting 这个一场div2 前面三题特别简单,这个D题的dp还是比较难的,不过题目告诉你了只能往上走,所以 ...

  6. 最短路 西北大学2019年春季校赛 （ 重现赛 ) 房间迷宫 求一个数的所有的约数nlogn

    题目:https://www.cometoj.com/contest/33/problem/G?problem_id=1461(密码:jwjtxdy) 学习一下 求一个数的约数 复杂度n*logn # ...

  7. 远程登陆与数据CP

    1 SSH登陆原理   SSH,Secure Shell,是一套协议标准,可以用来实现两台机器之间的安全登陆以及安全的数据传送,其保证数据安全的原理是非对称加密.   传统的对称加密方式使用的是一套密 ...

  8. 学习RxJava+Retrofit+OkHttp+MVP的网络请求使用

    公司的大佬用的是这一套,那我这个菜鸟肯定要学习使用了. 我在网上找了很多文章,写的都很详细,比如 https://www.jianshu.com/u/5fd2523645da https://www. ...

  9. 【Scala】关于集合的各种知识点

    目录 映射Map 不可变Map 概述 操作实例 可变Map 概述 操作实例 Map的遍历 for循环遍历 格式 操作实例 模式匹配遍历 格式 操作实例 Tuple 元祖 概述 定义格式 获取元素方法 ...

  10. 【Hadoop离线基础总结】数据仓库和hive的基本概念

    数据仓库和Hive的基本概念 数据仓库 概述 数据仓库英文全称为 Data Warehouse,一般简称为DW.主要目的是构建面向分析的集成化数据环境,主要职责是对仓库中的数据进行分析,支持我们做决策 ...