vue.config

// vue.config.js 示例代码

module.exports = {
  // 基本路径
  publicPath: './',

  // 输出文件目录
  outputDir: 'dist',

  // 静态资源目录 (相对于 outputDir)
  assetsDir: 'assets',

  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  lintOnSave: true,

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

  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,

  // webpack-dev-server 相关配置
  devServer: {
    open: true, // 自动打开浏览器
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

  // css 相关配置
  css: {
    extract: true, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (生产环境下)
    sourceMap: false, // 是否为 CSS 开启 source map
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/_variables.scss";`
      }
    },
    modules: false // 是否开启 CSS Modules
  },

  // webpack 配置，键值对象时会合并配置
  configureWebpack: {
    resolve: {
      alias: {
        '@': require('path').resolve(__dirname, 'src')
      }
    }
  },

  // 或者使用函数形式修改 webpack 配置
  chainWebpack: config => {
    config.module.rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        // 修改它的选项...
        return options;
      });
  },

  // 第三方插件配置
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: []
    }
  }
};

解释说明：

1. publicPath: 设置应用的基本路径，默认是 '/'。如果你的应用部署在子路径下，可以设置为该子路径。
2. outputDir: 构建输出的目录，默认是 dist。
3. assetsDir: 静态资源（如图片、字体等）的相对路径，默认是 assets。
4. lintOnSave: 是否在开发环境中启用 ESLint 检查。
5. runtimeCompiler: 是否使用包含运行时编译器的 Vue 构建版本，默认是 false。
6. productionSourceMap: 生产环境下是否生成 source map 文件，默认是 true。
7. devServer: 配置开发服务器的行为，如自动打开浏览器、代理 API 请求等。
8. css: CSS 相关配置，包括是否提取 CSS 文件、是否启用 CSS Modules 等。
9. configureWebpack 和 chainWebpack: 分别用于直接修改或链式修改 Webpack 配置。
10. pluginOptions: 第三方插件配置，如 style-resources-loader。

以上配置可以根据项目需求进行调整。