前言
本文系统的梳理了vue-cli3搭建项目的常见用法，目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点：
- 如何安装项目插件
- 添加浏览器支持
- 如何配置scss/stylus共享全局变量
- 如何整合elementUI等第三方框架并实现按需引入
- 配置单/多页面
- 如何配置自定义环境变量
- 如何在vue.config.js定制自己的webpack
- vue项目部署
说明
本文末尾会给出一个以上提到的所有功能的一个配置文件，可供大家学习参考。
思维导图
接下来，我们根据思维导图，一步步来解释和实现我们的目标。
1.安装项目插件
1vue add @vue/cli-plugin-eslint 2# 或 3vue add xjFile
vue add 的设计意图是为了安装和调用 Vue CLI 插件。对于普通的 npm 包而言，我们仍然可以（根据所选的 npm 包）使用包管理器。最后可以在vue.config.js做webpack自定义配置
2.添加浏览器支持
- browserslist
我们可以通过package.json 文件里的 browserslist字段或一个单独的 .browserslistrc 文件来指定项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀
例如：
1// .browserslistrc 2> 1% 3last 2 versions
想要获取更多browserslist，可移步browserslist
- Polyfill
默认情况下，cli会把 useBuiltIns: 'usage' 传递给 @babel/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。这确保了最终包里 polyfill 数量的最小化。但是如果其中一个依赖需要特殊的 polyfill，默认情况下 Babel 无法将其检测出来。我们可以通过如下三种方式解决此类问题：
- 将依赖添加到 vue.config.js 中的 transpileDependencies 选项
1// vue.config.js 2module.exports = { 3 // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来 4 transpileDependencies: ['glob'] 5}
- 可以使用 @vue/babel-preset-app 的 polyfills 选项预包含所需要的 polyfill
1// babel.config.js 2module.exports = { 3 presets: [ 4 ['@vue/app', { 5 polyfills: [ 6 'es6.promise', 7 'es6.symbol' 8 ] 9 }] 10 ] 11}
- 使用 useBuiltIns: 'entry' 然后在入口文件添加 import '@babel/polyfill',这种方式的问题就是会增加包的大小
3.配置scss/stylus共享全局变量
对与scss，可以使用如下方式开启：
1// vue.config.js 2module.exports = { 3 css: { 4 loaderOptions: { 5 sass: { 6 // 这里假设你有 `src/variables.scss` 文件 7 data: `@import "~@/variables.scss";` 8 } 9 } 10 } 11}
对于stylus，本人亲测使用如上方式无效，可以通过如下方式实现：
1vue add style-resources-loader 2 3// vue.config.js 4const path = require('path') 5module.exports = { 6 pluginOptions: { 7 'style-resources-loader': { 8 'patterns': [ 9 path.resolve(__dirname, 'src/styles/abstracts/*.styl'), 10 ] 11 } 12 } 13}
4.整合elementUI等第三方框架并实现按需引入
- 安装babel-plugin-component
npm install babel-plugin-component -D
- 配置babel.config.js
1module.exports = { 2 presets: [ 3 '@vue/app', 4 ], 5 plugins: [ 6 [ 7 "component", 8 { 9 "libraryName": "element-ui", 10 "styleLibraryName": "theme-chalk" 11 } 12 ] 13 ] 14}
此时即可按需引入element组件，优化项目体积了。
5.配置单/多页面
vue-cli默认单页面结构，我们可以通过配置文件来将项目配置成多页面：
1// vue.config.js 2const path = require('path') 3module.exports = { 4 // 单/多页面 5 pages: { 6 index: { 7 // page 的入口 8 entry: 'src/home/main.js', 9 // 模板来源 10 template: 'public/index.html', 11 // 在 dist/index.html 的输出 12 filename: 'index.html', 13 // 当使用 title 选项时， 14 // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title> 15 title: 'Your Web For PC', 16 // 在这个页面中包含的块，默认情况下会包含 17 // 提取出来的通用 chunk 和 vendor chunk。 18 // chunks: ['chunk-vendors', 'chunk-common', 'index'] 19 }, 20 // 当使用只有入口的字符串格式时， 21 // 模板会被推导为 `public/subpage.html` 22 // 并且如果找不到的话，就回退到 `public/index.html`。 23 // 输出文件名会被推导为 `subpage.html`。 24 // subpage: 'src/subpage/main.js' 25 }, 26}
6.如何配置自定义环境变量
你可以替换你的项目根目录中的下列文件来指定环境变量：
1.env # 在所有的环境中被载入 2.env.local # 在所有的环境中被载入，但会被 git 忽略 3.env.[mode] # 只在指定的模式中被载入 4.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
如下：
1// .env.local 2APPID=123 3VUE_APP_SECRET=secret
如果你想在客户端侧代码中使用环境变量，变量名因以 VUE_APP_开头，如下可获取定义的环境变量：
console.log(process.env.VUE_APP_SECRET)
7.如何在vue.config.js定制自己的webpack
我们可以使用cli支持的链式调用，或者自定义调用：
1// vue-cli内部webpack配置 2 chainWebpack: config => { 3 // 设置快捷目录别名 4 config.resolve.alias.set('utils',resolve('../utils')) 5 6 // 修改静态资源打包方式，下例为超过10k才用文件导入的方式，否则为base64.默认为4k 7 // config.module 8 // .rule('images') 9 // .use('url-loader') 10 // .loader('url-loader') 11 // .tap(options => Object.assign(options, { limit: 10240 })) 12 }, 13 // webpack自定义配置 14 configureWebpack: config => { 15 if (process.env.NODE_ENV === 'production') { 16 // 为生产环境修改配置... 17 } else { 18 // 为开发环境修改配置... 19 } 20 }
7.vue项目部署
这里我们使用shell脚本部署，当然大家也可以使用自己熟悉的方式部署：
1#!/usr/bin/env sh 2 3# 当发生错误时中止脚本 4set -e 5 6# 构建 7npm run build 8 9# cd 到构建输出的目录 10cd dist 11 12git init 13git add -A 14git commit -m 'deploy' 15 16git push -f git@bitbucket.org:<USERNAME>/<USERNAME>.bitbucket.io.git master 17 18cd -
最后，上一张相对完整的配置清单：
1// vue.config.js 2// 自定义vue配置 3const path = require('path'); 4const resolve = dir => path.join(__dirname, dir); 5// mock数据 6const mockData = require('./mock/test.json'); 7 8module.exports = { 9 // 基本路径 10 publicPath: './', 11 12 // 输出文件目录 13 // outputDir: 'dist', 14 15 // eslint-loader 是否在保存的时候检查 16 // lintOnSave: true, 17 18 // 单/多页面 19 pages: { 20 index: { 21 // page 的入口 22 entry: 'src/main.js', 23 // 模板来源 24 template: 'public/index.html', 25 // 在 dist/index.html 的输出 26 filename: 'index.html', 27 // 当使用 title 选项时， 28 // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title> 29 title: 'OpenCoder For PC', 30 // 在这个页面中包含的块，默认情况下会包含 31 // 提取出来的通用 chunk 和 vendor chunk。 32 // chunks: ['chunk-vendors', 'chunk-common', 'index'] 33 }, 34 // 当使用只有入口的字符串格式时， 35 // 模板会被推导为 `public/subpage.html` 36 // 并且如果找不到的话，就回退到 `public/index.html`。 37 // 输出文件名会被推导为 `subpage.html`。 38 // subpage: 'src/subpage/main.js' 39 }, 40 41 // css相关配置 42 css: { 43 // 是否使用css分离插件 ExtractTextPlugin 44 extract: true, 45 // 开启 CSS source maps? 46 sourceMap: false, 47 // css预设器配置项 48 loaderOptions: { 49 // stylus: { 50 // // @/ 是 src/ 的别名 51 // // 所以这里假设你有 `src/variables.stylus` 这个文件, 不过目前测试无效 52 // data: `@import "~@/style/variables.styl";` 53 // } 54 }, 55 // 启用 CSS modules for all css / pre-processor files. 56 modules: false 57 }, 58 59 60 pluginOptions: { 61 // 共享变量 62 'style-resources-loader': { 63 preProcessor: 'stylus', 64 patterns: [ 65 //这个是加上自己的路径， 66 //注意：试过不能使用别名路径 67 resolve('src/style/variables.styl'), 68 ] 69 } 70 }, 71 72 devServer: { 73 // 端口 74 port: 3000, 75 76 // 配置代理 77 proxy: { 78 '^/api': { 79 target: 'http://localhost:8081', 80 ws: true, 81 changeOrigin: true 82 }, 83 '^/data': { 84 target: 'http://localhost:3000' 85 } 86 }, 87 88 // mock 89 before(app){ 90 app.get('/api/getUser',(req,res,next)=>{ 91 res.json(mockData); 92 }) 93 } 94 }, 95 // vue-cli内部webpack配置 96 chainWebpack: config => { 97 // 设置快捷目录别名 98 config.resolve.alias.set('utils',resolve('../utils')) 99 100 // 修改静态资源打包方式，下例为超过10k才用文件导入的方式，否则为base64.默认为4k 101 // config.module 102 // .rule('images') 103 // .use('url-loader') 104 // .loader('url-loader') 105 // .tap(options => Object.assign(options, { limit: 10240 })) 106 }, 107 // webpack配置 108 configureWebpack: config => { 109 if (process.env.NODE_ENV === 'production') { 110 // 为生产环境修改配置... 111 } else { 112 // 为开发环境修改配置... 113 } 114 } 115} 116 117// babel.config.js 118module.exports = { 119 presets: [ 120 '@vue/app', 121 ], 122 plugins: [ 123 [ 124 "component", 125 { 126 "libraryName": "element-ui", 127 "styleLibraryName": "theme-chalk" 128 } 129 ] 130 ] 131} 132 133// .browserslistrc 134> 1% 135last 2 versions 136 137// package.json 138{ 139 "name": "pc", 140 "version": "0.1.0", 141 "private": true, 142 "scripts": { 143 "serve": "vue-cli-service serve", 144 "build": "vue-cli-service build", 145 "build:serve": "serve -s dist", 146 "lint": "vue-cli-service lint", 147 "test:unit": "vue-cli-service test:unit" 148 }, 149 "dependencies": { 150 "clipboard": "^2.0.4", 151 "core-js": "^2.6.5", 152 "element-ui": "^2.9.1", 153 "register-service-worker": "^1.6.2", 154 "serve": "^11.0.2", 155 "vue": "^2.6.10", 156 "vue-router": "^3.0.3", 157 "vuex": "^3.0.1" 158 }, 159 "devDependencies": { 160 "@vue/cli-plugin-babel": "^3.8.0", 161 "@vue/cli-plugin-eslint": "^3.8.0", 162 "@vue/cli-plugin-pwa": "^3.8.0", 163 "@vue/cli-plugin-unit-mocha": "^3.8.0", 164 "@vue/cli-service": "^3.8.0", 165 "@vue/test-utils": "1.0.0-beta.29", 166 "babel-eslint": "^10.0.1", 167 "babel-plugin-component": "^1.1.1", 168 "chai": "^4.1.2", 169 "eslint": "^5.16.0", 170 "eslint-plugin-vue": "^5.0.0", 171 "style-resources-loader": "^1.2.1", 172 "stylus": "^0.54.5", 173 "stylus-loader": "^3.0.2", 174 "vue-cli-plugin-style-resources-loader": "^0.1.3", 175 "vue-template-compiler": "^2.6.10" 176 } 177} 178
本文梳理了一个最基本的cli3项目配置流程，我们可以根据这个思维导图，去搭建自己的项目。
本文参考vue-cli官网