2023年7月3日发(作者：)

常⽤设置记录 各项常⽤设置，⽅便使⽤。 中的代码整体通过

s 导出⼀个对象，我们所做的是配置⾥⾯的各项

option//

通过s导出对象s = {}各项

option 的作⽤（只列出常⽤的）。1. publicPath配置打包时的路径。默认值是

‘/’ 即打包后访问路径没有任何变化。当这个值改为

‘’ 或

‘./’ 时，打包后的路径变为相对路径，可以被部署在任意路径。某些场景会结合

env 使⽤，例如：publicPath: _ENV === "production" ? "/v2" : "/",⽣产环境会多出⼆级路径

/v22. outputDir打包的⽂件夹名字，默认是

dist 。也可结合

env 使⽤：outputDir: Dir || 'dist'3. assetsDir打包后放置静态资源

js、css、img、fonts 的⽂件夹名字（相对于

outputDir 路径）。assetsDir: 'static'4. indexPath打包后⽣成的

‘’ 的⽂件名（相对于

outputDir 路径）。indexPath: ''5. lintOnSave是否在开发环境下通过

eslint-loader 在每次保存时 lint 代码。它的值可以是

boolean | ‘warning’ | ‘default’ | ‘error’lintOnSave: _ENV !== 'production'上⾯代码在⽣产环境中禁⽤。6. chainWebpack是⼀个函数，会接收⼀个基于 的

ChainableConfig 实例。允许对内部的

webpack 配置进⾏更细粒度的修改。上⾯引⽤

Vue-Cli 官⽹。点开链接跳到

webpack-chain 的

github 介绍。我们⼤多数情况⽤它配置引⽤资源的快捷路径。chainWebpack: config => { //

添加别名 .set('@', resolve('src')) .set('@assets', resolve('src/assets')) .set('@components', resolve('src/components')) .set('@views', resolve('src/views')) .set('@store', resolve('src/store'));},7. css配置

css ，这是⼀个对象，主要看⾥⾯的配置项。7.1. extract是否使⽤

css 分离插件

ExtractTextPlugin。这个插件⼤致的作⽤是分离

css 样式,防⽌打包后的样式加载错乱等问题。css:{ extract: true},7.2. requireModuleExtension使⽤

CSS Modules 时可以去掉⽂件名中的

‘.module’css:{ requireModuleExtension: true},7.3. loaderOptions向

css 相关的

loader 传递选项css:{ loaderOptions:{ css: { //

这⾥的选项会传递给 css-loader

}, postcss: { //

这⾥的选项会传递给 postcss-loader plugins: [require('tailwindcss'), require('autoprefixer')] }, scss: { //

这⾥的选项会传递给 sass-loader //

加载全局样式 prependData: `@import "~@/assets/css/";` }, less: { //

这⾥的选项会传递给 less-loader //

定义全局对象，可加⼊全局变量 globalVars: { primary: '#06c' } } }},8. devServer配置

webpack-dev-server 的选项。devServer: { host: "0.0.0.0", //

本地 host port: 3000, //

设置端⼝号 https: false, //

是否启⽤ https open: false, //

启动服务时是否⾃动打开浏览器 hotOnly: true, //

是否启⽤热更新 overlay: { //

编译错误时，页⾯全屏覆盖层 warnings: false, errors: true }, proxy: 'localhost:4000' //

设置代理}devServer 的配置项看上⾯的注释都很容易理解。主要说说设置代理，上⾯的

proxy: ‘localhost:4000’ 将任何未知请求 (没有匹配到静态⽂件的请求) 代理到

localhost:4000给出的例⼦如下：devServer: { proxy: { '/api': { target: 'localhost:4000', //

代理地址 ws: true, //

⽀持websocket changeOrigin: true } }}访问

localhost:3000/api 时没有匹配到任何资源，代理到

target 指定的

URL，

ws 设置是否⽀持

websocket，changeOrigin 在开启代理后设置是否在本地创建⼀个虚拟服务端。9. configureWebpack这个值可以是对象或函数。如果是对象，会通过 webpack-merge 合并到最终的配置中。如果函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回⼀个被克隆或合并过的配置版本。上⾯还是引⽤

Vue-Cli 官⽹。我只贴出⾃⼰代码中⽤到的：configureWebpack: { name: 'some title',

resolve: { alias: { "@": resolve("src"), }, },},name 可以在

中当作标题访问。resolve 部分和前⾯

chainWebpack 中设置⼀样。