vueconfig.js配置文件

// vue.config.js 配置文件示例

module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',

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

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

  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  lintOnSave: process.env.NODE_ENV !== 'production',

  // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，
  // 但是这会让你的应用额外增加 10kb 左右。
  runtimeCompiler: false,

  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,

  // webpack-dev-server 相关配置
  devServer: {
    open: true, // 自动打开浏览器
    host: 'localhost', // 指定使用地址，默认localhost
    port: 8080, // 指定端口号，默认8080
    https: false, // 使用https提供服务
    hotOnly: false, // 热更新
    proxy: { // 设置代理
      '/api': {
        target: '<url>', // 代理的目标地址
        changeOrigin: true, // 开启代理
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

  // 对内部的 webpack 配置进行更细粒度的修改。
  configureWebpack: {
    plugins: [
      // 添加自定义插件
    ]
  },

  // 如果这个值是一个函数，则会接收一个基于 webpack-chain 的 ChainableConfig 实例。
  // 允许对内部的 webpack 配置进行更细粒度的修改。
  chainWebpack: config => {
    config.module
      .rule('svg')
      .exclude.add(/node_modules/) // 排除 node_modules 中的 svg 文件
      .end()
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons')) // 处理 src/icons 目录下的 svg 文件
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      });
  }
};

解释说明：

• publicPath：指定应用打包后的相对路径或绝对路径，用于部署到不同的服务器环境。
• outputDir：指定打包输出的文件夹名称。
• assetsDir：指定静态资源存放的子目录。
• lintOnSave：控制是否在开发环境中启用 ESLint 检查。
• runtimeCompiler：是否使用包含模板编译器的 Vue 版本。
• productionSourceMap：是否在生产环境中生成 source map 文件。
• devServer：配置开发服务器的行为，如自动打开浏览器、代理等。
• configureWebpack 和 chainWebpack：用于自定义和修改 Webpack 配置，满足项目特定需求。