vue.config.js 全局配置_清风细雨_林木木_vueconfigjs配置css

网络投稿 02-07 4020

参考资料思否：https://segmentfault.com/a/1190000019920162 手册：https://cli.vuejs.org/zh/config/

vue.config.js 全局配置

配置参数：

1.两种配置方式 module.exports = { // 选项…… } const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // 选项…… }) 2.baseUrl / baseUrl

静态资源地址。

module.exports = { // baseURL:'./' // vue-cli版本是3.2.0以前的 publicPath:'./' // publicPath属性适用于vue-cli 高于3.2.0的项目 }

不同开发环境的切换模式：

module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/生产环境路径/' : '/' } 3.outputDir

生产环境构建文件的目录地址。

module.exports = { outputDir:'newBuild' } 4.assetsDir

放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

module.exports = { assetsDir:'staticDir' } 5.indexPath

指定生成的 index.html 的输出路径 (相对于 outputDir)。

module.exports = { indexPath:'indexHtmlPath' } 6.filenameHashing

生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存,通过将这个选项设为 false 来关闭文件名哈希。

module.exports= { filenameHashing:false, } 7.pages

多页打包

module.exports = { pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 filename: 'index.html', chunks: ['chunk-vendors', 'chunk-common', 'index'] } } } 8.lintOnSave

是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。

module.exports= { lintOnSave:false, } 9.devServer

让浏览器 overlay 同时显示警告和错误

module.exports = { devServer: { overlay: { warnings: true, errors: true } } }

文件初始值：

/** * @type {import('@vue/cli-service').ProjectOptions} */ module.exports = { // 选项... }

或者，也可以使用 @vue/cli-service 提供的 defineConfig 帮手函数，以获得更好的类型提示：

// vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // 选项 }) 10.runtimeCompiler

是否使用包含运行时编译器的 Vue 构建版本。

publicPath

原来的baseUrl，从Vue CLI 3.3 起已弃用baseUrl改用publicPath

部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://·blogs.com/zjianfei/p/15141030.html

configureWebpack与chainWebpack的作用相同，唯一的区别就是他们修改webpack配置方式不同：

chainWebpack通过链式编程的形式，来修改默认的webpack配置configureWebpack通过操作对象的形式，来修改默认的webpack配置

（1）chainWebpack方式：

https://·/chuanmin/p/15838988.html

module.exports = { chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .tap(options => { // 修改他的选项 return options }) } }

（2）以下都是configureWebpack 配置方式：

configureWebpack 对象形式：

module.exports = { configureWebpack:{ resolve: { // 别名配置 alias: { 'assets': '@/assets', 'common': '@/common', 'components': '@/components', 'network': '@/network', 'configs': '@/configs', 'views': '@/views', 'plugins': '@/plugins', } } } }

configureWebpack 函数形式：

module.exports = { configureWebpack:(config) => { if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... config.mode = 'production' } else { // 为开发环境修改配置... config.mode = 'development' } // 开发生产共同配置别名 Object.assign(config.resolve, { alias: { '@': path.resolve(__dirname, './src'), 'assets': path.resolve(__dirname, './src/assets'), 'common': path.resolve(__dirname, './src/common'), 'components': path.resolve(__dirname, './src/components'), 'network': path.resolve(__dirname, './src/network'), 'configs': path.resolve(__dirname, './src/configs'), 'views': path.resolve(__dirname, './src/views'), 'plugins': path.resolve(__dirname, './src/plugins'), } }) } }

process.env.NODE_ENV详解

参考：https://·/p/f4638f5df1c7