怎么在vue-cli3中配置跨域

本篇文章給大家分享的是有關怎么在vue-cli3中配置跨域，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

安裝 vue-cli3 環境準備

1. 如果您已安裝 vue-cli2 ，請先刪除當前腳手架，否則無法成功安裝 vue-cli3 。

npm uninstall vue-cli -g

2. 檢查 node.js 版本。 vue-cli3 需要 node 版本大于8.9。在cmd中輸入 node -v 查看版本。如果版本過低，請先去 node官網 中下載高版本。

安裝腳手架

vue-cli3的包名有 vue-cli 改為 @vue/cli 。 使用npm全局安裝vue-cli3。

npm install @vue/cli -g

然后使用 vue -V

使用vue-cli3創建項目

vue-cli3 創建項目的方式和2.x也有一些區別。首先創建項目時給我們更多可配置的選項，在選擇手動選擇特性時，可以根據提示選擇是否安裝 vue-router 、 vuex 等。其次其目錄結構也可2.x有區分，下文會詳細講。然后我們可以把本次安裝配置保存為以后可以復用的preset,在以后創建項目時更快速。

1.輸入 vue create vue_cli3_test ，上下鍵可以選擇默認安裝或者手動安裝。這次我選擇手動安裝。

2.點擊回車鍵，進入配置界面。將需要安裝的配置前面勾選為*。空格鍵可以選中和取消選中。可以根據個人需求進行配置。

安裝成功后根據提示進入目錄，并運行項目。

cd vue_cli3_testyarn serve

3. vue-cli3 提供了圖形界面方式進行創建項目, 可以在網頁上直接進行項目的配置。

vue ui

4.打開目錄時發現配置文件都在了，大家不要慌張。可以在 package.json 文件的同級目錄下創建 vue.config.js 文件。文件的格式應該為

// vue.config.js
module.exports = {
 // 選項...
}

下面為我的基礎配置：

module.exports = {
  outputDir: 'dist',  //build輸出目錄
  assetsDir: 'assets', //靜態資源目錄（js, css, img）
  lintOnSave: false, //是否開啟eslint
  devServer: {
    open: true, //是否自動彈出瀏覽器頁面
    host: "localhost", 
    port: '8081', 
    https: false,  //是否使用https協議
    hotOnly: false, //是否開啟熱更新
    proxy: null,
  }
}

官網給出了豐富而全面的配置，更多配置請參考 https://cli.vuejs.org/zh/conf... 。

跨域處理

前后端分離開發時，不得不面對跨域問題。對于跨域，可以用兩種辦法進行處理。

1.安裝nginx，將后端和前端都代理帶nginx上。

2.在vue-cli中配置proxy，將API請求代理到API服務器上。設置devServer.proxy

devServer: {
    open: true, //是否自動彈出瀏覽器頁面
    host: "localhost", 
    port: '8081',
    https: false,
    hotOnly: false, 
    proxy: {
      '/api': {
        target: 'http://localhost:5000', //API服務器的地址
        ws: true, //代理websockets
        changeOrigin: true, // 虛擬的站點需要更管origin
        pathRewrite: {  //重寫路徑 比如'/api/aaa/ccc'重寫為'/aaa/ccc'
          '^/api': ''
        }
      }
    },
  }

所以若是后端的API為'/aaa/ccc'，我們需要在發請求時將路徑設置為'/api/aaa/ccc',這樣我們的請求才會被proxy代理到。

以上就是怎么在vue-cli3中配置跨域，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。