vue.config.js

// vue.config.js

module.exports = {
  // 基本路径
  publicPath: './', // 默认'/'，部署应用包时的基本 URL。例如：如果应用被部署在 https://mydomain.com/my-app/，则设置为 '/my-app/'

  // 输出文件目录
  outputDir: 'dist', // 默认'dist'，构建生成的生产环境应用包存放的目录。

  // 静态资源目录 (相对于 outputDir)
  assetsDir: 'assets', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

  // 是否在保存时使用 `eslint-loader` 进行检查
  lintOnSave: process.env.NODE_ENV !== 'production', // 默认true，生产环境下关闭 ESLint 检查以提高构建速度。

  // 是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false, // 默认false，是否使用包含运行时编译器的 Vue 构建版本。

  // 生产环境下的 source map 设置
  productionSourceMap: false, // 默认true，生产环境下不生成 source map 文件以减小打包体积。

  // CSS 相关选项
  css: {
    // 是否将组件中的 CSS 提取到一个独立的 CSS 文件中 (只用在生产环境中)
    extract: true, // 默认true，在开发环境下不会提取。

    // 是否为 CSS 开启 source map
    sourceMap: false, // 默认false，开启后有助于调试样式问题。

    // 向 CSS 中传递选项
    loaderOptions: {
      sass: {
        // 向全局 sass 样式传入共享的全局变量等
        additionalData: `@import "@/styles/_variables.scss";`
      }
    }
  },

  // webpack-dev-server 相关配置
  devServer: {
    open: true, // 自动打开浏览器
    host: '0.0.0.0', // 允许外部访问
    port: 8080, // 端口号
    https: false, // 是否启用 https
    hotOnly: false, // 热更新
    proxy: { // 代理配置
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

  // 第三方插件配置
  pluginOptions: {
    // 自定义插件配置项
  }
};

解释说明：

• publicPath: 配置应用的公共路径，默认是根路径 '/'。如果你的应用不是部署在根路径下，需要修改此配置。

• outputDir: 构建后的文件输出目录，默认是 dist 文件夹。

• assetsDir: 静态资源（如图片、CSS、JS）的相对路径，默认是与 outputDir 同级的 assets 文件夹。

• lintOnSave: 控制是否在保存文件时进行 ESLint 检查。生产环境下通常关闭以加快构建速度。

• runtimeCompiler: 是否使用包含运行时编译器的 Vue 构建版本，默认是 false，即使用优化过的版本。

• productionSourceMap: 是否在生产环境中生成 source map 文件，默认是 true，但为了减小打包体积，建议设为 false。

• css: CSS 相关配置，包括是否提取 CSS 文件、是否生成 source map、以及向 CSS 加载器传递额外的选项等。

• devServer: 配置开发服务器的行为，如自动打开浏览器、端口号、代理等。

• pluginOptions: 配置第三方插件的选项，具体取决于你使用的插件。