Vue cli4 反向代理配置

1. 安装 Vue 脚手架

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

vue --version

2. 创建项目

运行以下命令来创建一个新项目：

vue create hello-world

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

3. 安装 node_modules 依赖

npm i
cnpm i

4.在根目录创建 vue.config.js

 5.编辑 vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/': {
        target: 'http://localhost:3000',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  }
}

6. 重新启动项目测试