vue.config.js常用配置详解

以下是vue.config.js常用配置的一些示例：

1. 修改输出目录

module.exports = {
  outputDir: 'dist' // 将构建好的文件输出到dist目录下
}

2. 配置代理

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 将/api开头的请求代理到本地的3000端口
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

3. 自定义webpack配置

module.exports = {
  configureWebpack: {
    // 自定义webpack配置
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src') // 设置@为src目录的别名
      }
    }
  }
}

4. 添加全局样式

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/variables.scss";` // 在每个组件中都可以使用全局的变量
      }
    }
  }
}

5. 配置打包分析

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin() // 打包分析
    ]
  }
}