vue.config.js配置

vue.config.js配置

vue.config.js是一个Vue CLI 3.x项目的配置文件，用于配置Vue项目的各种选项。以下是一个详细的vue.config.js配置文件示例：

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

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

  // 静态资源目录
  assetsDir: 'static',

  // 是否使用eslint
  lintOnSave: true,

  // 生产环境是否生成sourceMap
  productionSourceMap: false,

  // webpack配置
  configureWebpack: {
    // 入口文件
    entry: './src/main.js',
    // 输出文件
    output: {
      filename: 'js/[name].[hash:8].js',
      chunkFilename: 'js/[name].[hash:8].js'
    },
    // 插件
    plugins: [
      // 插件列表
    ]
  },

  // webpack链式操作
  chainWebpack: (config) => {
    // 修改loader配置
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options =>
        Object.assign(options, {
          limit: 10240
        })
      );
  },

  // devServer配置
  devServer: {
    // 代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

  // 第三方插件配置
  pluginOptions: {
    // 插件列表
  }
};

在上面的配置文件中，我们可以配置以下选项：

• publicPath：基本路径。
• outputDir：输出文件目录。
• assetsDir：静态资源目录。
• lintOnSave：是否使用eslint。
• productionSourceMap：生产环境是否生成sourceMap。
• configureWebpack：webpack配置，包括入口文件、输出文件、插件等。
• chainWebpack：webpack链式操作，可以用于修改loader配置等。
• devServer：devServer配置，包括代理配置。
• pluginOptions：第三方插件配置，包括插件列表等。

根据您的实际需求，您可以在这个详细的配置文件中添加、删除或修改配置选项和插件配置。