vue-cli 3.0 vue.config.js配置

baseUrl

1
baseUrl: process.env.NODE_ENV === 'production'? '/static' : '/',

打包后的输出目录

1
outputDir: '../static',

静态资源打包地址

1
assetsDir: './assets',

保存时是不是用eslint-loader来lint代码

1
lintOnSave: true,

page配置

1
2
3
4
5
6
7
8
index: {
// 入口文件
entry: './src/main.js',
// 模版文件
template: 'public/index.html',
// 输出文件名
filename: 'index.html'
}

是否使用包含运行时编译器的Vue内核版本

1
runtimeCompiler: true,

使用runtime-only还是in-browser compiller

1
compiler: false,

webpack配置

1
2
chainWebpack: () => {},
configureWebpack: () => {},

vue-loader配置

https://vue-loader.vuejs.org/en/options.html

1
vueLoader: {},

是否需要生产环境的sourceMap,默认true

1
productionSourceMap: true,

CSS相关

1
2
3
4
5
6
7
8
9
10
css: {
// 是否提取css生成单独的文件 默认 true
extract: true,
// 使用 CSS source maps?
sourceMap: false,
// loader配置
loaderOptions: {},
// 使用 css Modules
modules: false
},

使用多线程否

1
parallel: require('os').cpus().length > 1,

使用autoDLLPlugin

1
dll: false,

pwa相关

https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

1
pwa: {},

dev server相关配置

使用package devsever配置无法热更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
devServer: {
host: '192.168.54.107',
port: 8071,
https: false,
hotOnly: true,
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}

这里说一下热更新有可能失效的情况

  • 用npm安装
  • server配置写在config.js里面,在package里面会失效

配置示例

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
78
79
80
81
82
83
84
85
86
87
88
89
90
const path = require('path');
const Compression = require('compression-webpack-plugin') // gzip压缩
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // 包的大小分析工具

function resolve(dir) {
return path.join(__dirname, dir)
}

const debug = process.env.NODE_ENV === 'production'

module.exports = {
publicPath: debug ? '/public/static/' : '/',
chainWebpack: config => {
config.resolve.alias
.set('js', resolve('src/assets/js'))
.set('css', resolve('src/assets/css'))
.set('img', resolve('src/assets/img'))
.set('public', resolve('src/components/public'))
},
devServer: {
port: 8090,
open: false, // 是否自动打开浏览器页面
proxy: {
'/api': {
target: 'http://localhost:3000',
ws: true,
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': ''
}
}
}
},
productionSourceMap: false, //如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建
configureWebpack: config => { // gzip压缩
if (debug) {
return {
plugins: [
new Compression({
test: /\.js$|\.html$|\.css/, // 匹配文件名
threshold: 10240, // 对超过10k的数据进行蒴
deleteOriginalAssets: false, // 是否删除源文件
})
]
}
}
// if (!debug) {
// return {
// plugins: [
// // 使用包分析工具
// new BundleAnalyzerPlugin()
// ]
// }
// }
},
pages: {
index: {
// entry for the page
entry: 'src/main.js',
// the source template
template: 'public/index.html',
// output as dist/index.html
filename: 'index.html',
publicPath: '/',
// when using title option,
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'PandaDeal',
// chunks to include on this page, by default includes
// extracted common chunks and vendor chunks.
// chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// when using the entry-only string format,
// template is inferred to be `public/subpage.html`
// and falls back to `public/index.html` if not found.
// Output filename is inferred to be `subpage.html`.
// subpage: 'src/subpage/main.js'
},
lintOnSave: process.env.NODE_ENV !== 'production',
// chainWebpack: (config) => {
// config.resolve.alias
// .set('@$', resolve('src'))
// .set('assets', resolve('src/assets'))
// .set('components', resolve('src/components'))
// .set('layout', resolve('src/layout'))
// .set('base', resolve('src/base'))
// .set('static', resolve('src/static'))
// .set('Com', resolve('src/utils/utils'))
// .set('wx', 'weixin-js-sdk')
// }
}

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :