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` 命令以应用更改。
























- 粉丝: 2
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 保险公司电子商务应用方案建议书模板.doc
- 6.1网络上的人际交往.ppt
- 计算机操作系统专业课程设计.doc
- pkpm软件应用之砖混结构设计实例(1)(1).docx
- 通信基站维护技术方案PPT学习课件.ppt
- 软件工程试卷及答案多套试卷(1).docx
- 电子通信行业的技术标准与企业创新样本.doc
- 软件项目协议书范本(1).doc
- 高二物理电磁波与信息化社会3(1)省名师优质课赛课获奖课件(1).ppt
- 大学计算机专业优秀团员自我鉴定3篇(1).docx
- 互联网技术在班级管理中的有效应用(1).docx
- 大数据时代读后感读书心得精选.doc
- 校园网络安全问题分析与对策.doc
- 第1章计算机网络概论-教案PPT学习课件.ppt
- 网站维护简洁协议(标准版)(1)(1).docx
- 做好网络文明的优质作文.doc


