vue.config配置解读

最新推荐文章于 2024-07-22 13:50:45 发布

只会cv的小前端

最新推荐文章于 2024-07-22 13:50:45 发布

阅读量1.7k

点赞数

分类专栏：配置文件文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/wancc123/article/details/130357789

版权

配置文件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

下面是 vue.config.js 中的所有配置项及其解释：（太多找不着，按 ctrl + F 进行全局搜，搜不到的评论艾特我，我进行补充）

module.exports = {
  publicPath: '/', // 部署应用包时的基本 URL
  outputDir: 'dist', // 打包输出目录
  assetsDir: '', // 静态资源目录
  indexPath: 'index.html', // 指定生成的 index.html 的输出路径
  filenameHashing: true, // 文件名哈希
  pages: undefined, // 多页面配置
  lintOnSave: true, // eslint-loader 是否在保存的时候检查
  runtimeCompiler: false, // 是否使用包含运行时编译器的 Vue 构建版本
  transpileDependencies: [], // 默认情况下 babel-loader 忽略其中的所有文件 node_modules
  productionSourceMap: true, // 生产环境是否生成 sourceMap 文件
  crossorigin: undefined, // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性
  integrity: false, // 是否在生成的 HTML 中启用 Subresource Integrity (SRI)
  configureWebpack: {}, // webpack 配置
  chainWebpack: () => {}, // webpack 链式配置
  css: {
    modules: false, // 启用 CSS modules
    extract: true, // 是否使用 CSS 分离插件
    sourceMap: false, // 是否为 CSS 开启 source map
    loaderOptions: {}, // css-loader 选项
  },
  devServer: {
    open: false, // 是否自动打开浏览器
    host: '0.0.0.0', // 指定使用一个 host，默认是 localhost
    port: 8080, // 端口号
    https: false, // 是否使用 https
    hotOnly: false, // 是否开启热更新
    proxy: null, // 配置跨域代理
    before: app => {}, // 提供在服务器内部的其他中间件之前执行自定义中间件的能力
  },
  pluginOptions: {}, // 第三方插件配置
};

下面是一个 vue.config.js 的示例：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  indexPath: 'index.html',
  filenameHashing: true,
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Index Page',
      chunks: ['chunk-vendors', 'chunk-common', 'index'],
    },
    about: {
      entry: 'src/about.js',
      template: 'public/about.html',
      filename: 'about.html',
      title: 'About Page',
      chunks: ['chunk-vendors', 'chunk-common', 'about'],
    },
  },
  lintOnSave: true,
  runtimeCompiler: false,
  transpileDependencies: [],
  productionSourceMap: true,
  crossorigin: undefined,
  integrity: false,
  configureWebpack: {},
  chainWebpack: () => {},
  css: {
    modules: false,
    extract: true,
    sourceMap: false,
    loaderOptions: {
    //这段代码是在配置 webpack 的 loader 选项，其中包含了 sass 和 scss 两个选项。
    //在这两个选项中，都设置了 additionalData 属性，其含义是在编译 sass 或 scss 文件时，
    //自动引入指定的基础样式文件 _base.scss。
    //这样做的好处是，可以避免在每个 sass 或 scss 文件中都手动引入基础样式文件，
    //提高了开发效率。同时，也可以统一管理基础样式文件，方便维护。
     sass: {
        additionalData: '@import "@s/_base.scss";'
      },
      scss: {
        additionalData: '@import "@s/_base.scss";'
      }
    },
  },
  devServer: {
    open: true,
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
    before: app => {},
  },
  pluginOptions: {},
};

这个示例中，我们配置了以下内容：

publicPath：根据环境变量设置应用包的基本 URL。
outputDir：打包输出目录。
assetsDir：静态资源目录。
indexPath：指定生成的 index.html 的输出路径。
filenameHashing：文件名哈希。
pages：多页面配置。
lintOnSave：eslint-loader 是否在保存的时候检查。
runtimeCompiler：是否使用包含运行时编译器的 Vue 构建版本。
transpileDependencies：默认情况下 babel-loader 忽略其中的所有文件 node_modules。
productionSourceMap：生产环境是否生成 sourceMap 文件。
crossorigin：设置生成的 HTML 中《 link rel=“stylesheet”》和《script》标签的 crossorigin 属性。
integrity：是否在生成的 HTML 中启用 Subresource Integrity (SRI)。
devServer：开发服务器配置。
proxy：配置跨域代理。

详细解读 devServer 各个属性

在webpack的devServer配置中，proxy属性用于配置代理服务器，使开发环境中的请求可以被代理到其他服务器上。

proxy属性的所有属性含义如下：

target：代理的目标服务器地址，可以是一个字符串或一个对象，字符串表示目标服务器的地址，对象可以包含以下属性：
- host：目标服务器的主机名
- port：目标服务器的端口号
- protocol：目标服务器的协议，默认为http
changeOrigin：是否改变请求头中的origin字段，默认为false，表示不改变
secure：是否使用https协议，默认为false
pathRewrite：路径重写规则，可以是一个对象或一个函数，用于将请求的路径重写为代理服务器上的路径
bypass：一个函数，用于决定哪些请求不需要被代理，返回true表示不需要代理，返回false表示需要代理
ws：是否启用WebSocket代理，默认为false。
headers : 可以用来设置请求头信息

举例：

devServer: {
  proxy: {
    '/api': {
      ws:false,
      target: 'http://localhost:3000',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      },
       headers: {
          Accept: 'application/json'
       }
    }
  }
}

这个配置表示将所有以/api开头的请求代理到本地的3000端口上，同时将请求路径中的/api替换为空字符串。

详细解读 configureWebpack 各个属性

在Vue项目中，可以通过vue.config.js文件来配置webpack，其中configureWebpack属性可以用来自定义webpack配置。下面是configureWebpack中常用的属性及其作用：

resolve：用于配置模块的解析方式，可以设置模块的查找路径、别名等。

const path = require('path'); // 先引入path模块
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
      	// 将 ../../assets/img/1.png  转化为 @/1.png
      	// 将 ../../style/test/1.scss 转化为 @/1.scss
        '@a': path.join(__dirname, 'src/assets/img')
        '@s': path.join(__dirname, 'src/style'),
      }
    }
  }
}

plugins：用于配置webpack插件，可以添加自定义的插件或修改默认插件的配置。

const MyPlugin = require('./my-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new MyPlugin(),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      })
    ]
  }
}

module：用于配置模块的加载方式，可以设置不同类型的文件的loader。

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        }
      ]
    }
  }
}

optimization：用于配置webpack的优化策略，可以设置代码分割、压缩等。

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all'
      },
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true
            }
          }
        })
      ]
    }
  }
}

devtool：用于配置source map的生成方式，可以设置不同的选项来控制source map的质量和生成速度。

module.exports = {
  configureWebpack: {
    devtool: 'cheap-module-eval-source-map'
  }
}

performance：用于配置webpack的性能优化策略，可以设置文件大小限制等。

module.exports = {
  configureWebpack: {
    performance: {
      hints: 'warning',
      maxAssetSize: 1024 * 1024,
      maxEntrypointSize: 1024 * 1024
    }
  }
}

chainWebpack 是干嘛的

chainWebpack 属性可以用来自定义 webpack 的配置。

配置跟原始的webpack差不多，不经常在这里面修改，但也举个常用的例子

在生产环境下去除 console 和 debugger

module.exports = {
    chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = process.env.NODE_ENV === 'production';
      args[0].terserOptions.compress.drop_debugger = process.env.NODE_ENV === 'production';
      return args;
    });
  }
}

transpileDependencies : ES6+ 转换成 ES5 （Babel 进行转换）

在 Vue.js 项目中，如果我们使用了一些第三方库或插件，这些库可能使用了 ES6+ 的语法，而一些旧版的浏览器并不支持这些语法，因此需要将这些库的代码转换成 ES5 的语法。这时候就需要使用 Babel 进行转换。但是，如果我们将所有的第三方库都进行转换，会导致构建时间变长，因此我们可以通过配置 transpileDependencies 属性来指定需要进行转换的第三方库。

transpileDependencies 是一个数组，其中的每个元素都是一个字符串或正则表达式，用于匹配需要进行转换的依赖库的名称。默认情况下，Vue CLI 会将 node_modules 目录下的所有依赖库都进行转换，但是我们可以通过配置 transpileDependencies 来指定需要转换的依赖库。

例如，我们可以在 vue.config.js 文件中添加以下配置：

module.exports = {
  transpileDependencies: [
    'my-dep',
    /other-dep/
  ]
 // transpileDependencies: [/node_modules/] 这是默认的
}

这里我们指定了两个需要进行转换的依赖库：my-dep 和 other-dep。其中，my-dep 是一个字符串，表示需要转换的依赖库的名称；/other-dep/ 是一个正则表达式，表示需要转换的依赖库的名称符合该正则表达式的规则。

需要注意的是，如果我们指定了某个依赖库进行转换，但是该依赖库本身已经使用了 Babel 进行转换，那么就会导致重复转换，从而增加构建时间和文件大小。因此，我们需要根据实际情况来选择需要进行转换的依赖库。

只会cv的小前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue.config配置解读

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。下面是 vue.config.js 中的所有配置项及其解释：（太多找不着，按 ctrl + F 进行全局搜，搜不到的评论艾特我，我进行补充）publicPathoutputDirassetsDirindexPathpagesintegritydevServerproxy。
复制链接

扫一扫

专栏目录