安裝 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.jsmodule.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配置與跨域處理方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言小編會及時回復大家的