一个简易的 vue-cli3 的迁移教程。适用于普通的 vue-cli2 项目。
对于没有了解过 vue-cli3 的童鞋，建议先去看看官方的教程： 传送门
新版本的新特性
1. 插件
使用 cli 的插件，可以很快的搭建一个项目的结构。如 axios 的插件 vue-cli-plugin-axios，可以自动创建一个带有 request 和 resonpose 的拦截器的 axios 的实例的文件。使用时直接引入即可。
ps：一般插件新建的文件都放在 src/plugin 文件夹下。
2. 减少配置
vue-cli3 中内置了很多 webpack 的配置，如 babel，各个 css 预编译器，几乎只需要安装完相对应的 loader 即可开箱即用，无需过多的配置即可直接开发。
3. 图形化
自带的 GUI 界面直接将上手成本置为 0。在终端中运行命令： vue ui 打开浏览器中就可以愉快的使用 GUI 进行项目管理。
vue-cli2 的迁移
src
直接覆盖即可。
static
直接复制到新项目的 public/static 即可。
index.html
复制覆盖至 public 目录下的 index.html 即可。
CDN 配置
旧版的可以看这里：记一次使用 vue-admin-template 的优化历程
新版的基本不用怎么修改即可直接使用：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| const webpack = require('webpack')
const path = require('path')
const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin')
const Vue = require('vue')
const Buefy = require('buefy/package.json')
const AV = require('leancloud-storage')
const externals = {
}
const assets = [
{ path: 'https://unpkg.com/[email protected]/lib/buefy.min.css', type: 'css'}
]
console.log(process.env.NODE_ENV, AV.version)
const isProd = process.env.NODE_ENV === 'production'
if (isProd) {
externals['vue'] = 'Vue'
externals['buefy'] = 'Buefy'
externals['leancloud-storage'] = 'AV'
assets.push(
{ path: `https://lib.baomitu.com/vue/${Vue.version}/vue.min.js`, type: 'js' },
{ path: `https://unpkg.com/[email protected]${Buefy.version}/lib/index.js`, type: 'js' },
{ path: `https://cdn.jsdelivr.net/npm/[email protected]${AV.version}/dist/av-min.js`, type: 'js' },
)
}
const plugins = [{
name: 'html-assets',
func: HtmlWebpackIncludeAssetsPlugin,
options: {
assets,
append: !isProd,
publicPath: '',
}
}, {
name: 'dll',
func: webpack.DllReferencePlugin,
options: {
context: path.join(__dirname, '../'),
manifest: require('../configs/vendor-manifest.json')
}
}]
module.exports = {
externals,
plugins
}
|
DLL Plugin
旧版的可以看这里：记一次使用 vue-admin-template 的优化历程
主要还是 webpack4 只需要配置一个 mode: 'production' 即可，无需再额外配置繁琐的 webpack.optimization。
package.json 中添加新的命令：
1
2
3
| {
"build:dll": "webpack --config configs/dll.js --mode production"
}
|
再安装新的命令包，让 yarn/npm 可以直接使用 webpack 命令：
1
| $ yarn add -D webpack-command
|
新增 configs/dll.js 文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| const webpack = require('webpack');
const path = require('path');
const utils = {
assetsPath: function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? 'static'
: 'static'
return path.posix.join(assetsSubDirectory, _path)
}
}
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
const vendors = [
];
const context = path.join(__dirname, '../')
const webpackConfig = {
mode: 'production',
context,
output: {
path: path.join(__dirname, '../public/js/'),
filename: '[name].dll.js',
library: '[name]_[hash]',
},
entry: {
"vendor": vendors,
},
plugins: [
new webpack.DllPlugin({
context,
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_[hash]',
})
],
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
};
module.exports = webpackConfig
|
其他配置
vue-cli3 的其他所有 webpack 都可以通过 vue.config.js 进行配置，需要手动新建。
vue.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| const {externals, plugins} = require('./config/cdn')
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/PRODUCTION/'
: '/',
chainWebpack: config => {
plugins.forEach(plugin => {
config.plugin(plugin.name)
.use(plugin.func, [plugin.options])
})
config.externals(externals)
}
}
|
推荐在 vue.config.js 中使用 webpack-chain 进行配置
Pug 配置
安装尤大的 pug-plain-loader: yarn add -D pug-plain-loader
chainWebpack 添加：
1
2
3
| config.module
.use('pug').test(/\.pug$/)
.end()
|
Sass 配置
只需要安装 sass-loader 即可。
如需使用 fast-sass-loader 代替，则需要修改配置：
1
2
3
4
5
6
7
8
9
| ;['scss', 'sass'].forEach(style => {
['vue', 'vue-modules', 'normal-modules', 'normal'].forEach(one => {
config.module.rule(style)
.oneOf(one)
.use('sass-loader')
.loader('fast-sass-loader')
.end()
})
})
|
Vux 配置
未研究出，卒。
总结
不得不说，新版的 cli 真的很方便新手，配合 webpack-chain 也可以清晰明了的去配置 webpack，只是兼容性需要一步步去摸索。GUI 的界面让管理 vue 项目变得更加简单。
如迁移过程中有任何疑问，可以留言一起探讨。