Vue-cli3项目配置Vue.config.js实战记录

Vue CLI 3 是 Vue.js 官方提供的一个命令行工具，用于快速搭建 Vue.js 项目。相比之前的版本，Vue CLI 3 在项目结构上进行了简化，不再包含 `build` 和 `config` 文件夹，而是将大部分配置集中到了 `vue.config.js` 文件中。这个文件位于项目的根目录下，允许开发者自定义 Webpack 配置，以满足特定项目需求。 在 `vue.config.js` 文件中，我们可以看到以下一些关键配置选项： 1. **baseUrl**: 这是应用的基路径，默认为 `'/'`，用于确定静态资源的相对路径。例如，如果你的应用部署在服务器的子目录下，你可以将它设置为相应的路径。 2. **outputDir**: 指定构建输出目录，即编译后的文件会放在哪个目录下，默认为 `'dist'`。 3. **lintOnSave**: 如果设置为 `true`，在保存时会运行 ESLint 进行代码检查，帮助开发者遵循编码规范。 4. **compiler**: 是否使用包含运行时编译器的完整构建。通常在需要在模板中使用 `v-bind:` 或 `v-on:` 编译指令时，才需要设置为 `true`。默认情况下，Vue CLI 3 会使用 runtime-only 构建，以减小生产包的大小。 5. **chainWebpack** 和 **configureWebpack**: 这两个函数允许你分别通过链式操作和对象形式来修改 Webpack 配置。`chainWebpack` 更加灵活，适合复杂的配置，而 `configureWebpack` 则更适合简单的配置覆盖。 6. **css**: 与 CSS 相关的配置，如 `extract`（是否提取 CSS 到单独文件）、`sourceMap`（是否开启 CSS source map）以及 `loaderOptions`（自定义 CSS 加载器的选项）。 7. **devServer**: 包含开发服务器的相关配置，如 `port`（设置监听的端口号，如上文提到的 8080）、`proxy`（设置 API 跨域代理）和 `before`（在服务器启动前执行的函数）。 8. **pluginOptions**: 用于配置第三方插件的选项，比如 PWA 插件的配置。 在实战中，例如，通过 `vue.config.js` 设置启动端口为 8080 可以这样写： ```javascript module.exports = { devServer: { port: 8080 } }; ``` 设置路径别名可以这样： ```javascript module.exports = { chainWebpack: config => { config.resolve.alias.set('components', resolve('src/components')); } }; ``` 在这里，`resolve` 函数用于获取相对于配置文件的绝对路径。 总结来说，`vue.config.js` 是 Vue CLI 3 中的核心配置文件，它使得开发者能够轻松地自定义 Webpack 配置，以适应各种项目需求。通过理解并熟练使用这些配置选项，你可以优化构建过程，提高开发效率，并确保应用性能。记住，每次修改 `vue.config.js` 后，需要重新运行 `npm run serve` 或 `yarn serve` 命令以应用更改。