博客
关于我
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/

你可能感兴趣的文章
mysql5.7 安装版 表不能输入汉字解决方案
查看>>
MySQL5.7.18主从复制搭建(一主一从)
查看>>
MySQL5.7.19-win64安装启动
查看>>
mysql5.7.19安装图解_mysql5.7.19 winx64解压缩版安装配置教程
查看>>
MySQL5.7.37windows解压版的安装使用
查看>>
mysql5.7免费下载地址
查看>>
mysql5.7命令总结
查看>>
mysql5.7安装
查看>>
mysql5.7性能调优my.ini
查看>>
MySQL5.7新增Performance Schema表
查看>>
Mysql5.7深入学习 1.MySQL 5.7 中的新增功能
查看>>
Webpack 之 basic chunk graph
查看>>
Mysql5.7版本单机版my.cnf配置文件
查看>>
mysql5.7的安装和Navicat的安装
查看>>
mysql5.7示例数据库_Linux MySQL5.7多实例数据库配置
查看>>
Mysql8 数据库安装及主从配置 | Spring Cloud 2
查看>>
mysql8 配置文件配置group 问题 sql语句group不能使用报错解决 mysql8.X版本的my.cnf配置文件 my.cnf文件 能够使用的my.cnf配置文件
查看>>
MySQL8.0.29启动报错Different lower_case_table_names settings for server (‘0‘) and data dictionary (‘1‘)
查看>>
MYSQL8.0以上忘记root密码
查看>>
Mysql8.0以上重置初始密码的方法
查看>>