做個開源博客學習Vite2 + Vue3 （二）設置別名、代理和ESLint

vite2可以有很多配置，也可以都使用默認配置，這個看項目需要。

vite.config.js

我們先看看 vite.config.js里面的常用配置，其他配置可以看官網：https://cn.vitejs.dev/config/

// vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path" // 主要用於alias文件路徑別名
// 加別名的函數
function pathResolve(dir) {
  return resolve(__dirname, ".", dir)
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()], // 配置需要使用的插件列表，這里將vue添加進去
  // 配置文件別名 vite1.0是/@/  2.0改為/@
  // 這里是將src目錄配置別名為 /@ 方便在項目中導入src目錄下的文件
  resolve: {
    alias: {
      "/@": pathResolve("src"),
      "/config": pathResolve("public/config"),
      "/com": pathResolve("src/components")
    }
  },
  base: "vue3-blog", // 便於發布到gitee
  // 打包配置
  build: {
    target: 'modules',
    // outDir: 'dist', //指定輸出路徑
    // assetsDir: 'assets', // 指定生成靜態資源的存放路徑
    minify: 'terser' // 混淆器，terser構建后文件體積更小
  },
  // 本地運行配置，及反向代理配置
  server: {
    cors: true, // 默認啟用並允許任何源
    open: true, // 在服務器啟動時自動在瀏覽器中打開應用程序
    //反向代理配置，注意rewrite寫法，開始沒看文檔在這里踩了坑
    proxy: {
      '/api': {
        target: 'http://192.168.99.223:9000',   //代理接口
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

• 別名
  這里嘗試了好多種方法，發現這種可行。主要是官網似乎也沒說 resolve 要 在哪里引用。

• base
  默認情況下，會認為項目運行在網站的根目錄里面，但是有些情況下項目無法運行在根目錄里面，
  比如發布到GitHub，只能使用 https://naturefw.gitee.io/vue3-blog 這樣的目錄，那么這時候就需要設置這個base了。
  也很簡單 base: "vue3-blog" 這樣就可以，這樣發布打包的時候就可以正確設置js、css等的引用路徑。

• 反向代理
  這個主要是處理ajax（axios）的跨域訪問的。以前對這個比較模糊，不過嘗試之后就清晰了。

跨域訪問

嘗試一下跨域訪問的方式。

• 安裝 axios

yarn add axios

• 前端測試代碼

然后在組件里面做一個簡單的測試。

import axios from 'axios'

const get = () => {
  axios.get('api/a')
    .then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })
}

• 后端測試代碼

后端使用node建立一個最簡單的web服務

// server.js
const http = require('http');

http.createServer(function(request, response) {
  // 設置響應頭
  response.writeHeader(200, {
    "Content-Type" : "text/plain"
  });
  console.log('有訪問者')
  // 響應主體為 "Hello world!"
  response.write("Hello world!");
  response.end();
})
// 設置監聽端口為9000
.listen(9000);

console.log('請打開：http://localhost:9000')

用 node server.js 運行這個服務。

• 測試運行

1. 運行vue的項目，向后端申請數據，
2. 這時候會先提交到vite2啟動的web服務，
3. 然后判斷后再轉給node建立的web服務，
4. 處理之后返給node建立的web服務，
5. 最后返給瀏覽器。

前端得到的數據是這樣的：因為是通過vite2建立的服務做周轉，所以不算跨域。

測試通過。

安裝ESlint

編寫代碼需要有一個共同的規范，雖然大家都有各自的習慣，但是還是需要盡量的統一一下，ESLint就是一個很好的選擇。

vue-cli建立項目的時候就非常簡單，我們選擇一個風格就可以自動安裝了，現在vite2還不夠自動化，需要我們自己安裝，今天學習了一下，補充這塊短板。

• 安裝

yarn add eslint

• 配置

問答的形式進行配置。

npx eslint --init

對自己狠一點，我們選擇第三個，嚴格模式：

選擇 類型模塊，選擇 JavaScript modules：

當然選 vue.js 了

要不要用TS？目前不會，先不用了。

代碼在哪里運行？注意這是多選，那就都選好了。

進入重點環節了，開始選擇代碼風格了。這個大概是問你，要套餐還是單點，符合主流，我們選套餐。

vue-cli4.5建立的項， 選擇的是 Standard config （ESLint+標准配置），所以這里選第二項。據說這些都是各位大牛總結出來的，我們按照這個來就好。

選擇配置文件的格式，這里選擇js

立即執行？

其實我是想用 yarn 安裝的，但是又不知道怎么寫。

yarn add 
eslint-plugin-vue@latest 
eslint-config-standard@latest 
eslint@^7.12.1 
eslint-plugin-import@^2.22.1 
eslint-plugin-node@^11.1.0 
eslint-plugin-promise@^4.2.1

也許是這么寫吧。

果然還是應該用 yarn 來安裝。

VSCode 使用 ESLint 配置文件需要去插件市場下載插件 ESLint 。