博客
关于我
vue-cli3 配合 webpack 配置详解(vue.config.js)
阅读量:254 次
发布时间:2019-03-01

本文共 3109 字,大约阅读时间需要 10 分钟。

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

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

1. 组件全套配置说明

Vue CLI 3.0 的配置文件通常位于项目根目录下的 vue.config.jswebpack.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 配置中,设置 crossOriginin 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'    }  }}

5. 配置优化建议

  • 减少链式配置:尽量避免复杂的链式操作,直接在配置文件中明确设置。
  • 优化 loader:根据项目需求,选择最合适的 loader,避免不必要的性能损失。
  • 合理使用 source map:在开发环境下启用,而在生产环境下关闭,提升构建效率。
  • 注意跨域配置:在 devServer 中合理设置跨域权限,避免资源加载失败。

通过合理配置 Vue CLI 3.0 和 webpack,可以显著提升项目的构建效率和性能,满足不同项目的需求。

转载地址:http://fbox.baihongyu.com/

你可能感兴趣的文章
Mysql中索引的分类、增删改查与存储引擎对应关系
查看>>
Mysql中索引的最左前缀原则图文剖析(全)
查看>>
MySql中给视图添加注释怎么添加_默认不支持_可以这样取巧---MySql工作笔记002
查看>>
Mysql中获取所有表名以及表名带时间字符串使用BetweenAnd筛选区间范围
查看>>
Mysql中视图的使用以及常见运算符的使用示例和优先级
查看>>
Mysql中触发器的使用示例
查看>>
Mysql中设置只允许指定ip能连接访问(可视化工具的方式)
查看>>
mysql中还有窗口函数?这是什么东西?
查看>>
mysql中间件
查看>>
MYSQL中频繁的乱码问题终极解决
查看>>
MySQL为Null会导致5个问题,个个致命!
查看>>
MySQL为什么不建议使用delete删除数据?
查看>>
MySQL主从、环境搭建、主从配制
查看>>
Mysql主从不同步
查看>>
mysql主从同步及清除信息
查看>>
MySQL主从同步相关-主从多久的延迟?
查看>>
mysql主从同步配置方法和原理
查看>>
mysql主从复制 master和slave配置的参数大全
查看>>
MySQL主从复制几个重要的启动选项
查看>>
MySQL主从复制及排错
查看>>