前言：
一晃眼Vue都出到4了发现自己对Vue3和Vue2之间的变化还不清楚，因为实习工作的原因经常在Vue3和Vue2之间反复横跳，项目结构的变化让自己很难受，特此记录一下。
项目结构对比
vue cli2
build包: 配置webpack,图中base.conf.js、dev.conf.js、prod.conf.js分别为webpack基础配置、开发环境配置、生产环境配置
config包: 配置一些全局的配置
static: 存放静态文件
vue cli3
vue cli3已集成大部分的webpack配置
若需要手动配置需手动在根目录新建一个vue.config.js1
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// vue.config.js 常用配置
module.exports = {
// 基本路径 vue.cli 3.3以前请使用baseUrl
publicPath: '/',
// 输出文件目录
outputDir: 'dist',
// 用于嵌套生产的静态资产(js, css, img, fonts)的目录
assetsDir: '',
// 生产sourceMap
productionSourceMap: true,
// webpack配置
configureWebpack: () => {},
chainWebpack: () => {},
// css相关配置
css: {
// 启用 modules
modules: false,
// 是否使用css分离插件
extract: true,
// 开启CSS source maps?
sourceMap: false,
// css预设配置项
loaderOptions: {},
},
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: 8080,
proxy: {},
// 设置代理
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
...
...
This is copyright.