Vue.config.js - 剖析所有配置，掌控Vue项目建设

前端

2023-12-01 03:14:33

Vue.config.js：提升 Vue 项目构建和运行时的配置利器

在开发 Vue 项目时，vue.config.js 是一个不可或缺的配置文件。它提供了丰富的配置选项，帮助你自定义项目行为，优化构建和运行时体验。

publicPath：指定静态资源路径

publicPath 配置项用于指定构建后的静态资源（如 CSS、JavaScript、图片）的路径。它默认设置为 '/'，即根路径。
当项目部署到服务器上时，静态资源可能需要从其他路径访问。此时，你可以通过设置 publicPath 来指定正确的路径，确保资源能被正确加载。

assetsDir：自定义静态资源目录

assetsDir 配置项允许你指定静态资源（CSS、JavaScript、图片等）的目录。
默认情况下，静态资源输出在 outputDir 的根目录下。通过设置 assetsDir ，你可以将其输出到其他目录，比如 'static'。

其他重要的配置项

除了 publicPath 和 assetsDir 之外，vue.config.js 还包含许多其他重要的配置项，包括：

outputDir ：指定构建打包后的文件的输出目录。默认值为 'dist'。
lintOnSave ：指定是否在保存文件时进行语法检查。默认值为 'default'。
devServer ：指定开发服务器的配置，包括端口号、主机名、代理等。
chainWebpack ：允许你自定义 webpack 的配置，修改配置对象或添加插件。

示例：自定义 Vue.config.js

module.exports = {
  publicPath: '/my-project/',
  assetsDir: 'static',
  outputDir: 'build',
  lintOnSave: false,
  devServer: {
    port: 8080,
    host: 'localhost',
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].title = 'My Project'
      return args
    })
  }
}