vue.config.js 配置

// vue.config.js 配置

module.exports = {
  // 基本路径
  publicPath: './', // 默认是'/'，当构建用于生产环境时，相对路径可以确保项目在任何目录下都能正确加载资源

  // 输出文件目录
  outputDir: 'dist', // 构建后的文件输出目录，默认是'dist'

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

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

  // 是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false, // 默认false，如果需要使用template选项，则需要设置为true

  // 生产环境下的 source map 设置
  productionSourceMap: false, // 默认是true，关闭可以减少打包体积

  // css相关配置
  css: {
    // 是否将组件中的 CSS 提取到一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中)
    extract: true, // 默认是true，在生产环境中建议保持为true
    // 是否开启 CSS source maps
    sourceMap: false, // 默认是false，开启会增加打包时间
    // 向 CSS 相关的 loader 传递选项 (如 sass/less 等预处理器的配置)
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/_variables.scss";` // 引入全局scss变量
      }
    }
  },

  // webpack-dev-server 相关配置
  devServer: {
    open: true, // 自动打开浏览器
    host: 'localhost',
    port: 8080, // 端口号
    https: false,
    hotOnly: false, // 热更新
    proxy: { // 代理配置
      '/api': {
        target: 'http://localhost:3000', // 目标服务器地址
        changeOrigin: true, // 是否改变源
        pathRewrite: {
          '^/api': '' // 路径重写
        }
      }
    }
  },

  // 第三方插件配置
  pluginOptions: {
    // 这里可以添加第三方插件的配置项
  }
}