Vue项目的配置文件,可以自定义配置如代理、插件等‌

vue项目的配置文件,可以自定义配置如代理,插件等

在Vue项目中，可以通过vue.config.js文件来自定义配置，比如代理设置（devServer.proxy）、插件配置等。

以下是一个简单的vue.config.js配置示例：

module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
 
  // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
  outputDir: 'dist',
 
  // 静态资源的目录 (js, css, img, fonts)
  assetsDir: '',
 
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
 
  // CSS 相关选项
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false
  },
 
  // devServer 代理设置
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    open: true,
    proxy: {
      // 配置跨域处理 可以设置你想要代理的接口
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
 
  // 插件选项
  pluginOptions: {
    // ...
  },
 
  // configureWebpack 或 chainWebpack 调整内部webpack配置
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  },
 
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      if (process.env.NODE_ENV === 'production') {
        // 为生产环境修改配置...
      } else {
        // 为开发环境修改配置...
      }
      return args;
    });
  }
};

这个配置文件包含了基本的配置选项，比如基本路径、输出目录、是否生成source map文件、devServer的端口、代理设置等。同时，它展示了如何使用configureWebpack和chainWebpack来自定义webpack配置。根据你的项目需求，你可以添加或修改这些配置。