vue.config.js常用配置

在Vue.js项目中，可以通过vue.config.js文件对Webpack进行配置。以下是一些常用的vue.config.js配置选项：

// vue.config.js

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

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

  // 静态资源目录（js、css、img、fonts）
  assetsDir: 'static',

  // 是否使用ESLint进行代码检查
  lintOnSave: true,

  // 是否生成SourceMap
  productionSourceMap: false,

  // CSS相关配置
  css: {
    extract: true,
    sourceMap: false,
    loaderOptions: {
      sass: {
        // 全局导入SCSS变量和混入
        prependData: `
          @import "@/styles/variables.scss";
          @import "@/styles/mixins.scss";
        `
      }
    }
  },

  // 开发服务器配置
  devServer: {
    // 反向代理
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

这是一个基本的vue.config.js配置示例，你可以根据项目的具体需求进行相应的修改和扩展。这里列出了一些常用的配置选项：

• publicPath: 应用的基本URL路径。
• outputDir：输出目录。
• assetsDir：静态资源目录。
• lintOnSave：是否开启保存时的ESLint检查。
• productionSourceMap：是否生成生产环境的SourceMap。
• css：CSS相关配置，可以设置extract、sourceMap以及loaderOptions等。
• devServer：开发服务器配置，可以进行反向代理等设置。