前言

vite是下一代前端開(kāi)發(fā)與構(gòu)建工具，目前官方推薦使用vite來(lái)構(gòu)建項(xiàng)目。下面我們來(lái)看看如何創(chuàng)建vue3項(xiàng)目。

創(chuàng)建項(xiàng)目

官方提供了多種創(chuàng)建命令，如下：

根據(jù)自己的情況選擇合適的命令即可，我使用的是pnpm，所以：

pnpm create vite

然后會(huì)讓給你輸入一個(gè)項(xiàng)目名稱。再選擇一個(gè)framework，因?yàn)槲覀儎?chuàng)建vue3項(xiàng)目，所以選擇vue即可。再選擇代碼語(yǔ)言，我習(xí)慣使用JavaScript。如下：

項(xiàng)目創(chuàng)建完成會(huì)提示你后續(xù)需要做的工作，如下：

  cd logistics-system  pnpm install  pnpm run dev

根據(jù)提示操作即可，先進(jìn)入項(xiàng)目，然后執(zhí)行

會(huì)自動(dòng)安裝所有依賴，安裝完成后執(zhí)行pnpm run dev或pnpm dev就可以運(yùn)行項(xiàng)目了，這時(shí)候可以看到：

  ?  Local:   http://localhost:5173/
  ?  Network: use --host to expose
  ?  press h to show help

說(shuō)明項(xiàng)目成功運(yùn)行起來(lái)了，訪問(wèn)http://localhost:5173/ 即可看到默認(rèn)頁(yè)面了。

配置項(xiàng)目

成功創(chuàng)建并運(yùn)行項(xiàng)目后，下面我們就需要進(jìn)行一些配置，這樣方便我們后續(xù)開(kāi)發(fā)。

vscode可以在項(xiàng)目配置個(gè)性的設(shè)定，首先需要?jiǎng)?chuàng)建setting.json文件，在vscode中點(diǎn)擊左下角的設(shè)置按鈕，選擇命令面板（或者直接使用快捷鍵 shift+command+p），然后搜索“setting.json”，選擇“Open Workspace Setting(JSON)”即可。

然后就可以看到在項(xiàng)目的.vscode目錄下新建了一個(gè)setting.json文件，當(dāng)然這個(gè)是個(gè)空文件，我們按照相關(guān)規(guī)則進(jìn)行配置即可，下面是一個(gè)示例：

注意：這里使用了格式化配置，需要先在vscode中安裝插件prettier。這樣當(dāng)編輯文件后保存的時(shí)候就會(huì)自動(dòng)進(jìn)行格式化。

在vite.config.js中為src目錄配置一個(gè)別名，如下：

import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import path from 'path';...
// https://v/config/export default defineConfig({  resolve: {    alias: {      '@': path.resolve(__dirname, 'src')    }  },  plugins: [vue()]  ...});

這樣在import的時(shí)候，就可以直接使用“@/...”了。

但是開(kāi)發(fā)過(guò)程中會(huì)發(fā)現(xiàn)輸入'@'并沒(méi)有智能補(bǔ)全的提示，還需要在jsconfig.json（沒(méi)有則創(chuàng)建一個(gè)）中配置一下，如下：

在paths中配置一下，然后需要重啟一下vscode，否則無(wú)法生效。

開(kāi)啟https

在vite.config.js中可以進(jìn)行服務(wù)器相關(guān)配置，比如端口、代理、開(kāi)啟https，如下：

import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import path from 'path';

export default defineConfig({  resolve: {    ...  },  plugins: [    vue()  ],  base: '/', // 打包路徑  server: {    host: '0.0.0.0',    port: 3300, // 服務(wù)端口號(hào)    open: true, // 服務(wù)啟動(dòng)時(shí)是否自動(dòng)打開(kāi)瀏覽器    cors: true, // 允許跨域    https: true    // proxy: {    //   '/api/': {    //     target: 'https://',    //     ws: true,    //     changeOrigin: true    //   }    // }  }});

這樣當(dāng)我們執(zhí)行pnpm dev開(kāi)啟服務(wù)后會(huì)自動(dòng)打開(kāi)瀏覽器，并且以https的方式訪問(wèn)。

但是這里有一個(gè)問(wèn)題，在vite3之后單獨(dú)開(kāi)啟https并不夠，這時(shí)候運(yùn)行服務(wù)打開(kāi)后會(huì)發(fā)現(xiàn)打不開(kāi)頁(yè)面，提示“協(xié)議不受支持”。官方文檔這樣說(shuō)的：

server.https?

• 類型：  boolean | https.ServerOptions

啟用 TLS + HTTP/2。注意：當(dāng) server.proxy 選項(xiàng) 也被使用時(shí)，將會(huì)僅使用 TLS。

這個(gè)值也可以是一個(gè)傳遞給 https.createServer() 的 選項(xiàng)對(duì)象。

需要一個(gè)合法可用的證書。對(duì)基本使用的配置需求來(lái)說(shuō)，你可以添加 @vitejs/plugin-basic-ssl 到項(xiàng)目插件中，它會(huì)自動(dòng)創(chuàng)建和緩存一個(gè)自簽名的證書。但我們推薦你創(chuàng)建和使用你自己的證書。

所以還需要安裝一個(gè)@vitejs/plugin-basic-ssl插件，執(zhí)行命令

在開(kāi)發(fā)環(huán)境使用即可，線上有正式簽名。

然后在vite.config.js中進(jìn)行配置，如下：

...import basicSsl from '@vitejs/plugin-basic-ssl';
export default defineConfig({  resolve: {    ...  },  plugins: [    ...    vue(),    basicSsl()  ],  base: '/', // 打包路徑  server: {    host: '0.0.0.0',    port: 3300, // 服務(wù)端口號(hào)    open: true, // 服務(wù)啟動(dòng)時(shí)是否自動(dòng)打開(kāi)瀏覽器    cors: true, // 允許跨域    https: true    // proxy: {    //   '/api/': {    //     target: 'https://',    //     ws: true,    //     changeOrigin: true    //   }    // }  },  ...});

這樣就可以正常訪問(wèn)了。

代理

上面提到可以在vite.config.js配置代理，通過(guò)代理可以解決跨越請(qǐng)求的問(wèn)題。

比如我們?cè)诒緳C(jī)（localhost）上調(diào)試，請(qǐng)求服務(wù)端接口的時(shí)候因?yàn)閔ost不同導(dǎo)致跨域，這樣就導(dǎo)致cookie帶不過(guò)去，但是服務(wù)端接口又是通過(guò)cookie來(lái)檢驗(yàn)用戶的，所以接口請(qǐng)求不成功。

類似的情況就可以用代理來(lái)解決，以axios為例，具體怎么使用這里就不細(xì)說(shuō)了，這里只關(guān)注請(qǐng)求接口的代碼，如下：

一個(gè)請(qǐng)求用戶信息的接口，本地調(diào)試cookie帶不過(guò)去，導(dǎo)致獲取不到數(shù)據(jù)。

我們先設(shè)置一個(gè)代理，如下：

...
export default defineConfig({  resolve: {    ...  },  plugins: [    ...  ],  base: '/', // 打包路徑  server: {    host: '0.0.0.0',    port: 3300,     open: true,     cors: true,     https: true    proxy: {  //設(shè)置代理      '/api': {        target: 'https://xxx.',        changeOrigin: true,        rewrite: path => path.replace(/^\/api/, '')      }    }  },  ...});

代理的target就是原服務(wù)接口的host，這里我們將“/api”路徑代理到原接口，簡(jiǎn)單來(lái)說(shuō)就是將 https://localhost:3300/api/xxx代理到https://xxx./xxx

以上面用戶信息接口為例，就是將 https://localhost:3300/api/userInfo代理到https://xxx./userInfo

這里的'/api'是為了與前端頁(yè)面路徑進(jìn)行區(qū)分，所以在代理的時(shí)候需要通過(guò)rewrite去掉。

然后修改請(qǐng)求如下：

這樣請(qǐng)求端口的時(shí)候因?yàn)槭恰發(fā)ocalhost”，不跨域所以cookie正常，然后代理到原服務(wù)端接口就可以將cookie帶過(guò)去了。

代理還有另外一個(gè)作用，當(dāng)前端頁(yè)面是https的時(shí)候，如果服務(wù)端接口是http則無(wú)法請(qǐng)求，瀏覽器會(huì)限制。通過(guò)設(shè)置代理就可以正常進(jìn)行請(qǐng)求了。比如上面測(cè)試環(huán)境，就是將https://localhost:3300/apidev/xxx代理到http://dev./xxx