安裝 vue-cli3 環(huán)境準備

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

npm uninstall vue-cli -g

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

安裝腳手架

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

npm install @vue/cli -g

然后使用 vue -V

使用vue-cli3創(chuàng)建項目

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

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

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

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

cd vue_cli3_testyarn serve

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

vue ui

4.打開目錄時發(fā)現(xiàn)配置文件都在了，大家不要慌張?？梢栽?package.json 文件的同級目錄下創(chuàng)建 vue.config.js 文件。文件的格式應該為

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

下面為我的基礎配置：

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

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

跨域處理

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

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'，我們需要在發(fā)請求時將路徑設置為'/api/aaa/ccc',這樣我們的請求才會被proxy代理到。

總結

以上所述是小編給大家介紹的vue-cli3配置與跨域處理方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言小編會及時回復大家的

最新評論