vue-cli2.0/3.0/4.0创建项目的方式差异解读和vue-cli4.0打包命令和环境配置
vue-cli2.x和vue-cli3.x 或者 vue-cli4.x 差异不能说非常大但是简洁了许多和看起来清爽了许多更方便使用了；准备工作先分析再来实践
更新到 3.x / 4.x 之后，vue-cli 的包名从 vue-cli 改成了 @vue/cli
官网文档地址：https://cli.vuejs.org/zh/guide/installation.html
查看其版本：vue -V 或者 vue --version
如果你安装了旧版本的cil请先移除：
npm uninstall vue-cli -g
# OR
yarn global remove vue-cli
然后重新安装新版本的 @vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
1.x 和 2.x 的的 vue-cli 采用 init 命令创建项目
vue init webpack project-name
3.x / 4.x 之后vue-cli 采用 create 命令创建项目
vue create project-name
vue-cli3与vue-cli4的区别：@vue/cli-plugin-pwa、@vue/cli-service等包的增强 ，原来在根目录下的store.js、router.js被分别放到了对应的文件夹下
webpack的安装：要安装最新版本或特定版本，请运行以下命令之一
npm install --save-dev webpack
npm install --save-dev webpack@<version>
如果你使用 webpack 4+ 版本，你还需要安装 CLI
npm install --save-dev webpack-cli
全局安装：
npm install --global webpack
npm install --global webpack-cli
查看版本：webpack -v;
/*
* @Description: vue.config.js 参考文档：https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
* @Version: 2.0
* @Autor: lhl
* @Date: 2020-08-26 17:03:04
* @LastEditors: lhl
* @LastEditTime: 2020-08-27 10:06:40
*/
module.exports = {
// 部署应用包时的基本 URL 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径
// 把开发服务器架设在根路径，可以使用一个条件式的值 process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
publicPath: './',
// 构建输出目录（打包位置）
outputDir: 'dist',
// 静态资源目录 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 -->打包后dist下面的静态资源文件夹名称
assetsDir: 'static',
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。Default
indexPath: 'index.html',
// 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
lintOnSave: process.env.NODE_ENV !== 'production',
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
productionSourceMap: false,
// 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中
// 如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象
configureWebpack: {},
// 对内部的 webpack 配置（比如修改、增加Loader选项）(链式操作)
chainWebpack: () => {
},
// css的处理
css: {
// 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块
requireModuleExtension: true,
// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS
// 默认生产环境下是 true，开发环境下是 false 是否使用css分离插件 ExtractTextPlugin
extract: false,
// 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
sourceMap: false,
//向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
loaderOptions: {
css: {},
less: {}
}
},
// 所有 webpack-dev-server 的选项都支持 更多参考：https://webpack.js.org/configuration/dev-server/
devServer: {
host: '0.0.0.0', // 允许外部ip访问
open: true, //设置自动打开浏览器
port: 8989, //设置端口
proxy: {
//设置代理
'/api': {
target: 'xxx', // 接口的域名
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
secure: false, // 如果是https接口，需要配置这个参数
pathRewrite: { // 如果接口本身没有/api需要通过pathRewrite来重写接口地址
'^/api': ''
}
}
}
},
// 向 PWA 插件传递选项
pwa: {},
// 第三方插件配置
pluginOptions: {
}
}
接下来说下环境变量配置（系统变量）和分环境打包命令配置
新建文件：.env.beta 预生产环境
NODE_ENV=beta
VUE_APP_TITLE=My App beta(staging)
VUE_APP_BASE_URL=https://www.beta.com/
新建文件：.env.development 开发环境
NODE_ENV=development
VUE_APP_TITLE=My App development 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中你可以在应用的代码中这样访问它们：console.log(process.env.VUE_APP_SECRET)(staging)
VUE_APP_BASE_URL=http://xx.x.xxx.xxx:8080/xxx
新建文件：.env.test 测试环境
NODE_ENV=test
VUE_APP_TITLE=My App test (staging)
VUE_APP_BASE_URL=https://www.test.com/
新建文件：.env.production 生产环境
NODE_ENV=production
VUE_APP_TITLE=My App production (staging)
VUE_APP_BASE_URL=https://www.production.com/
package.json文件加上：对应的打包命令
"build-dev": "vue-cli-service build --mode development",
"build-test": "vue-cli-service build --mode test",
"build-beta": "vue-cli-service build --mode beta",
"build-prod": "vue-cli-service build --mode production"
