Vue前端vue.config.js简介

以下是关于“Vue前端vue.config.js简介”的详细攻略：

什么是vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在 vue.config.js 文件，那么它会被 @vue/cli-service 自动加载。该文件会接收一个默认的导出对象，如下所示：

// vue.config.js
module.exports = {
  // 配置选项
}

常用的配置选项

publicPath

类型：string
默认值：'/'

此项用于设置应用的根路径。举个例子，如果应用被部署在一个子路径下，你需要在这里指定子路径。例如：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

outputDir

类型：string
默认值：'dist'

此项用于设置打包后的文件输出目录。

devServer

类型：Object

此项用于设置开发过程中的服务器配置选项。下面是一个示例：

module.exports = {
  devServer: {
    open: true, // 自动打开浏览器
    port: 8888, // 端口号
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端服务地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 将 /api 重写为 /
        }
      }
    }
  }
}

此示例中，我们成功配置了一个开发用服务器，使用http://localhost:8888访问该项目将自动打开浏览器，并且将HTTP请求代理转发到后端服务地址http://localhost:3000中。其中/api是需要转发的地址前缀，target是需要转发到的后端服务地址。

css

类型：Object

用于配置CSS加载选项。例如：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
}

此选项用于新加入的Less加载配置。由于Less语言不支持自定义函数，仅支持Javascript函数。因此，需要开启javascriptEnabled配置项，将自定义的Less函数定义为Javascript函数来解析。

示例1：配置开发环境的服务器代理

在开发环境中，我们通常会需要将前端的HTTP请求代理转发到后端服务器。例如，假设我们有一个API地址http://localhost:3000/api/data，并需要在前端项目访问此地址时自动代理到此地址，可以使用如下配置：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        // 把/api改为/
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

此配置项将在开发环境下自动代理与/api相关的HTTP请求至后端地址，例如http://localhost:3000/api/data转换为http://localhost:8888/data。changeOrigin配置项设置为true表示开启跨域请求。

示例2：自定义Vue

如果需要在Vue项目中使用Tree Shaking功能，那么需要安装babel-plugin-transform-imports，并在vue.config.js中进行配置：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin('transformImports')
      .use(require.resolve('babel-plugin-transform-imports'), [
        {
          'vant': {
            'transform': 'vant/es/${member}',
            'preventFullImport': true
          }
        }
      ])
  }
}

此配置项将在对象vant中使用Tree Shaking功能。为了启动此功能，首先需要安装babel-plugin-transform-imports这个包，然后在vue.config.js中进行配置，将vant对象中的成员转换为按需加载的形式。preventFullImport配置项表示在输出该成员时，是否需要仅输出该成员，而不是整个库。