vue-cli配置文件——config篇

下面是关于“vue-cli配置文件——config篇”的完整攻略：

1. 概述

在使用Vue-cli构建Vue项目时，除了基础配置文件（如 package.json、index.html、main.js等），还有一些高级配置文件。其中，config目录下的配置文件是一些开发、打包、运行时的配置信息集合。

2. 细节

2.1 index.js

index.js 是 Vue-cli 配置文件中最核心的文件之一，它主要负责 dev 和 build 时的主要配置。

下面是一个基础的index.js示例：

module.exports = {
  dev: {
    // ...
  },
  build: {
    // ...
  }
}

当你需要修改webpack配置时，可以通过添加configureWebpack或chainWebpack属性来实现。通常来说，新增配置可以通过这两个属性发挥作用：

module.exports = {
  chainWebpack: config => {
    // 更改执行配置
  },
  configureWebpack: {
    // 覆盖webpack默认配置
  },
}

此外，还可以添加plugins、loaders等，不使用字符串值而直接调用已有的函数：

module.exports = {
  configureWebpack: config => {
    // 还可以这样直接调用函数
    config.plugins.push(new MyAwesomeWebpackPlugin())
  }
}

2.2 dev.env.js

dev.env.js 主要用来配置开发环境中的变量。

下面是一个基础的dev.env.js示例：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

其中NODE_ENV是一个特殊的被Webpack定义的变量。

2.3 prod.env.js

prod.env.js 主要用来配置生产环境中的变量。

下面是一个基础的prod.env.js示例：

'use strict'
module.exports = {
  NODE_ENV: '"production"'
}

同样地，NODE_ENV也是一样被Webpack定义的变量。

3. 示例

3.1 修改代理

在开发模式下，我们需要解决跨域问题。由于我们一般把前端服务和后端服务分别运行在不同的端口上，因此我们需要通过代理方式来把请求转发到后端。

Vue-cli已经自带webpack-dev-server，可以很容易地添加proxyTable，把请求转发到后端服务。

首先在config目录下的index.js中的dev对象中加入proxyTable属性，用于配置代理:

dev: {
  proxyTable: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

这里我们配置了一个/api路由前缀，它将被代理到http://localhost:3000/api下（后端API地址）。

最后在 src/xxx.js 文件中发起请求，直接写url为 api/xxx 即可。

3.2 修改端口

有时候我们需要将Vue应用的开发或者打包运行在特定的端口上。可以通过dev和build对象中的port属性来完成。

比如，我们需要将开发模式的端口号设为8080：

dev: {
  port: 8080
}

同理，如果需要在打包时指定端口号，则：

build: {
  port: 8888
}

这样，当我们执行npm run dev时，Vue应用将会在端口号为8080的情况下启动。

同样地，当执行npm run build时，我们的Vue应用将会运行在端口号为8888的情况下打包。

简而言之，config文件夹下的各个文件对于Vue项目都具有指导意义，更多用法可以根据Vue官方文档自行查看和修改。