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. 重新啟動項目測試