Vue CLI 3.0 配置总结与 webpack 搭配使用

Vue CLI 3.0 是 Vue 的一大升级，相比前一代，它在构建工具和配置上有了显著改进。以下将对 Vue CLI 3.0 的配置进行详细总结，结合 webpack 的使用场景，帮助开发者更好地理解和应用这些配置。

1. 组件全套配置说明

Vue CLI 3.0 的配置文件通常位于项目根目录下的 vue.config.js 或 webpack.config.js，具体配置如下：

module.exports = {  // 部署应用时的基本 URL  baseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080',  // build时构建文件的目录  outputDir: 'dist',  // build时放置生成的静态资源 (js、css、img、fonts) 的目录  assetsDir: '',  // 指定生成的 index.html 的输出路径  indexPath: 'index.html',  // 默认在生成的静态资源文件名中包含 hash  filenameHashing: true,  // 构建多页面应用的页面配置  pages: {    index: {      entry: 'src/index/main.js',      template: 'public/index.html',      filename: 'index.html',      title: 'Index Page',      chunks: ['chunk-vendors', 'chunk-common', 'index']    },    // 其他页面配置，可按需添加    'subpage': 'src/subpage/main.js'  },  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码  lintOnSave: process.env.NODE_ENV !== 'production',  // 是否使用包含运行时编译器的 Vue 构建版本  runtimeCompiler: false,  // Babel 显式转译列表  transpileDependencies: [],  // 是否需要生产环境的 source map  productionSourceMap: true,  // 设置生成的 HTML 中 
    和

2. 常用配置解析

在实际项目中，以下是一些常用的配置技巧：

baseUrl：用于定义项目的基础 URL，通常用于部署时的路径配置。

outputDir：指定构建输出目录，建议将其设置为项目根目录或子目录。

assetsDir：在构建时，指定静态资源的存储目录，支持相对路径。

indexPath：定义生成的 index.html 文件路径，通常建议保留默认值。

filenameHashing：为生成的文件加上 hash，避免浏览器缓存问题。

pages：用于多页面应用的配置，支持单页应用和多页应用混合使用。

runtimeCompiler：开启或关闭 Vue 的运行时编译器，建议根据项目需求选择。

transpileDependencies：指定需要显式转译的依赖模块，通常用于第三方库。

productionSourceMap：决定是否在生产环境下生成 source map 文件。

css：负责 CSS 文件的处理，包括提取和 source map 等。

devServer：配置开发服务器，支持 hot-reload 和 HTTPS。

pwa：用于构建 Progressive Web App（PWA），支持 service worker 等特性。

3. 常见问题与优化建议

在实际使用过程中，可能会遇到以下问题：

构建速度慢：优化链式配置，减少不必要的 loader 加载。

source map 太大：在生产环境下禁用 source map，提升构建效率。

跨域问题：在 devServer 配置中，设置 crossOrigin 和 in integrity 属性，确保资源加载正常。

4. 实际应用示例

以下是一个典型的 Vue CLI 3.0 配置示例（基于 webpack）：

module.exports = {  // baseUrl配置，根据项目实际部署路径调整  baseUrl: process.env.NODE_ENV === 'production' ? 'http://example.com' : '',  outputDir: 'dist',  assetsDir: 'src/assets',  indexPath: 'index.html',  filenameHashing: true,  pages: {    index: {      entry: 'src/index/main.js',      template: 'src/index.html',      filename: 'index.html',      title: '项目主页',      chunks: ['chunk-vendors', 'chunk-common', 'index']    },    otherPage: {      entry: 'src/other/main.js',      template: 'src/other.html',      filename: 'other.html',      title: '其他页面'    }  },  lintOnSave: true,  runtimeCompiler: false,  transpileDependencies: [],  productionSourceMap: true,  css: {    extract: false,    sourceMap: false,    loaderOptions: {      css: {},      less: {}    }  },  devServer: {    host: 'localhost',    port: 8080,    hot: true,    https: true,    proxy: {      '/api': {        target: 'http://backend.com',        changeOrigin: true      }    }  },  pwa: {    workbox: {      generateSW: true,      swPath: 'sw.js'    }  }}