vue.config.js 文件的作用以及配置详解

vue.config.js 文件是 Vue CLI 项目中的配置文件，用于对 Vue 项目的构建、开发服务器等进行配置。

vue.config.js 的作用

1. 配置开发服务器：可以设置开发服务器的端口、代理等。
2. 配置构建选项：可以设置构建输出目录、文件名等。
3. 配置 Webpack：可以对 Webpack 进行一些自定义配置，如添加插件、修改模块解析等。
4. 配置 CSS：可以设置全局 CSS 选项，如 CSS 预处理器等。

配置项

以下是一些常用的配置项及其作用：

• publicPath：设置应用程序的基础 URL。
• *outputDir：设置构建输出目录，默认为 dist 。
• assetsDir：设置静态资源目录，默认为 '' 。
• devServer：配置开发服务器的选项。
  • port：开发服务器的端口。
  • proxy：配置代理，用于解决跨域问题。
• configureWebpack：直接修改 Webpack 的配置。
• chainWebpack：使用 webpack-chain 来更细粒度地修改 Webpack 配置。

解决跨域问题

在开发环境中，跨域问题通常可以通过代理来解决。你可以在 vue.config.js 中配置 devServer.proxy ，示例如下：

// vue.config.js
module.exports = {
  devServer: {
    port: 8080, // 开发服务器端口
    proxy: {
      '/api': {
        // 代理请求配置
        target: 'http://127.x.x.x:xxxx', // 目标服务器地址
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '' // 重写路径，将请求中的 '/api' 替换为空
        }
      }
    }
  }
}

以下是一个完整的 vue.config.js 示例代码：

const path = require('path')
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  /**
   * lintOnSave：{ type:Boolean default:true }
   * 是否在保存时使用 ESLint 进行代码检查，设置为 false 则不使用
   */
  lintOnSave: false,
  /**
   * productionSourceMap：{ type:Boolean,default:true }
   * 是否在生产环境生成 source map，设置为 false 可以加速生产构建
   */
  productionSourceMap: false,

  /**
   * 设置应用的根路径 (基础路径)，通常用于部署时
   * 在生产环境下使用 '/my-app/'，在开发环境下使用 '/'
   *   publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
   */
  publicPath: './',

  // 指定构建输出的目录，默认为 'dist'
  outputDir: 'build',

  // 指定静态资源（js、css、img、fonts）的目录，默认为 ''
  assetsDir: 'static',

  // 用于自定义 Webpack 配置，包括路径别名、性能提示...
  configureWebpack: {
    // 可以在这里添加插件等配置
    plugins: [
      // 添加插件
    ],
    resolve: {
      // 配置路径别名，方便导入模块
      alias: {
        '@': path.resolve('src') // '@' 别名指向 src 目录
      }
    },
    // 配置性能提示，限制入口和资源文件的大小
    performance: {
      hints: 'warning', // 性能提示类型
      // 入口起点的最大体积，整数类型（以字节为单位）
      maxEntrypointSize: xxxxxx, // 最大入口文件大小
      // 生成文件的最大体积，整数类型（以字节为单位）
      maxAssetSize: xxxxxx, // 最大资源文件大小
      // 只给出 js 文件的性能提示
      assetFilter: function(assetFilename) {
        return assetFilename.endsWith('.js'); // 只对 .js 文件进行性能提示
      }
    }
  },

  devServer: {
    port: 8080, // 本地开发服务器的端口号
    host: "0.0.0.0", // 本地开发机器的 IP 地址, 监听所有可用的网络接口
    https: false, // 是否使用安全的 HTTPS 协议
    open: true, // 是否在启动项目后自动打开浏览器
    proxy: {
      '/api': {
        // 代理请求配置
        target: 'http://127.x.x.x:xxxxx', // 目标服务器地址
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '' // 重写路径，将请求中的 '/api' 替换为空
        }
      },
      '/socket': {
        // WebSocket 代理配置
        target: 'ws://127.x.x.x:xxxx', // WebSocket 目标服务器地址
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/socket': '' // 重写路径，将请求中的 '/socket' 替换为空
        },
        ws: true // 启用 WebSocket 代理
      }
    }
  },

  // 指定需要被 Babel 转换的依赖
  transpileDependencies: ['some-dependency'],

 // 为插件提供额外的选项
  pluginOptions: {
    i18n: {
      // // 设置默认语言为中文-zh（简体） 英文-en
      locale: 'zh',
      // 设置回退语言为中文（简体） 英文-en
      fallbackLocale: 'zh',
      // 设置语言文件目录
      localeDir: 'locales',
      // 在单文件组件中启用
      enableInSFC: true
    }
  },

  // 使用 chainWebpack 进行更细粒度的 Webpack 配置
  chainWebpack: config => {
    // 修改 vue-loader 的选项
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        // 修改选项
        return options;
      });
  }
})

总结

vue.config.js 文件在 Vue 项目中起着重要作用，特别是在配置开发环境和解决跨域问题时。通过合理配置，可以使得前后端的交互更加顺畅。在生产环境中，跨域问题主要由后端进行处理，前端的配置主要针对开发阶段。