在vue cli3里进行配置vue.config.js

最新推荐文章于 2024-08-08 22:20:54 发布

蓝图Lily

最新推荐文章于 2024-08-08 22:20:54 发布

阅读量795

点赞数

分类专栏： Vue 文章标签： vue cli3 vue.config.js

本文链接：https://blog.csdn.net/qq_39288987/article/details/103040022

版权

本文介绍了vue-cli3与vue-cli2配置的不同，并详细讲解如何在vue-cli3中配置vue.config.js，包括设置webpack别名、sourcemap、输入输出路径、压缩控制、日志分析、externals、调试端口和proxy接口等关键配置。

摘要由CSDN通过智能技术生成

vue-cli3推崇零配置，导致了跟之前vue-cli2的配置方式都不一样了。

vue-cli2的build和config文件夹不见了，那么应该如何配置如webpack，别名设置，sourcemap控制，输入文件位置和输出文件位置和输出的方式，压缩js控制，打包webapck日志分析，externals忽略配置（外部引入），调试的端口配置，proxy接口配置等配置呢？

在vue cli3里面提供了一个配置文件vue.config.js，它是一个可选的配置文件（即你要自己手动创建），如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

下面是我写的一个比较常用的配置，仅供参考：

// vue.config.js
module.exports = {
   
  // type :string  defalut :"/"
  // 把开发服务器架设在根路径
  publicPath: process.env.NODE_ENV === 'produvtion'
    ? '/production-sub-path/'
    : '/',
  // publicPath: './', // 修改路径方式,以相对路径进行资源查找
  
  // type :string  defalut :"dist"
  // 打包后的文件夹名字
  outputDir: 'dist', // 修改发布目录

  // type :string  defalut :""
  // 静态资源目录
  assetsDir: 'assets',

  // type :string  defalut :"index.html"
  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  indexPath: 'index.html',

  // type :boolean  defalut :"true"
  // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存,如果是vue cli创建的index.html，则为true，无法使用 Vue CLI 生成的 index HTML，为false
  filenameHashing: true,

  // type :object  defalut :"undefined"
  // 设置单页面与多页面
  // 多页面情况下，每个“page”应该有一个对应的 JavaScript 入口文件。其值应该是一个对象，对象的 key 是入口的名字，value 是：
  // 一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；
  // 或一个指定其 entry 的字符串。
  // 具体情况看官网 https://cli.vuejs.org/zh/config/#pages
  pages: {
   
    index: