Vue3 入門：Vite 創建項目和使用

vite 是下一代前端開發與構建工具，目前官方推薦使用 vite 來構建項目。下面我們來看看如何創建 vue3 項目。

創建項目

官方提供了多種創建命令，如下：

npm init vite@latest
yarn create vite
pnpm create vite

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

pnpm create vite

然後會讓給你輸入一個項目名稱。再選擇一個 framework，因爲我們創建 vue3 項目，所以選擇 vue 即可。再選擇代碼語言，我習慣使用 JavaScript。如下：

✔ Project name: … logistics-system
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

項目創建完成會提示你後續需要做的工作，如下：

  cd logistics-system
  pnpm install
  pnpm run dev

運行項目

根據提示操作即可，先進入項目，然後執行

pnpm install

會自動安裝所有依賴，安裝完成後執行pnpm run dev或pnpm dev就可以運行項目了，這時候可以看到：

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

說明項目成功運行起來了，訪問 http://localhost:5173/ 即可看到默認頁面了。

配置項目

成功創建並運行項目後，下面我們就需要進行一些配置，這樣方便我們後續開發。

setting.json

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

然後就可以看到在項目的. vscode 目錄下新建了一個 setting.json 文件，當然這個是個空文件，我們按照相關規則進行配置即可，下面是一個示例：

{
  "files.autoSave": "off",
  "git.autofetch": true,
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.wpy": "javascriptreact",
    "*.py": "python"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "git.confirmSync": false,
  "search.actionsPosition": "right",
  "search.exclude": {
    "**/dist": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.suggestSelection": "first",
  "files.exclude": {
    "**/node_modules": true,
    "*/node_modules": true
  },
  "sync.gist": "686f9b0e863088a613cdc96e5bc81c55",
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "beautify.language": {
    "js": {
      "type": ["javascript", "json", "jsonc"],
      "filename": [".jshintrc", ".jsbeautifyrc"]
    },
    "css": ["css", "less", "scss"],
    "html": ["htm", "html"]
  },
  "editor.tabSize": 2,
  "sync.autoUpload": true,
  "sync.forceUpload": false,
  "sync.forceDownload": false,
  "sync.autoDownload": true,
  "beautify.config": "",
  "prettier.trailingComma": "none",
  "prettier.arrowParens": "avoid",
  "editor.fontSize": 13,
  // "workbench.colorTheme": "Visual Studio Dark",
  "editor.accessibilitySupport": "on",
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.rulers": [],
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "extensions.closeExtensionDetailsOnViewChange": true,
  "[javascriptreact]": {
    "editor.defaultFormatter": "svipas.prettier-plus"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.format.enable": true,
  "editor.formatOnSave": true,
  "prettier.singleQuote": false,
  "prettier.semi": true
}

注意：這裏使用了格式化配置，需要先在 vscode 中安裝插件 prettier。這樣當編輯文件後保存的時候就會自動進行格式化。

在 vite.config.js 中爲 src 目錄配置一個別名，如下：

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

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

但是開發過程中會發現輸入 "@" 並沒有智能補全的提示，還需要在 jsconfig.json（沒有則創建一個）中配置一下，如下：

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "jsx": "preserve",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "exclude": ["node_modules"]
}

在 paths 中配置一下，然後需要重啓一下 vscode，否則無法生效。

開啓 https

在 vite.config.js 中可以進行服務器相關配置，比如端口、代理、開啓 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, // 服務端口號
    open: true, // 服務啓動時是否自動打開瀏覽器
    cors: true, // 允許跨域
    https: true
    // proxy: {
    //   "/api/": {
    //     target: "https://xxx.xxx.cn",
    //     ws: true,
    //     changeOrigin: true
    //   }
    // }
  }
});

這樣當我們執行pnpm dev開啓服務後會自動打開瀏覽器，並且以 https 的方式訪問。

但是這裏有一個問題，在 vite3 之後單獨開啓 https 並不夠，這時候運行服務打開後會發現打不開頁面，提示 “協議不受支持”。官方文檔這樣說的：

server.https¶

類型： boolean | https.ServerOptions

啓用 TLS + HTTP/2。注意：當 server.proxy 選項也被使用時，將會僅使用 TLS。

這個值也可以是一個傳遞給 https.createServer() 的選項對象。

需要一個合法可用的證書。對基本使用的配置需求來說，你可以添加 @vitejs/plugin-basic-ssl 到項目插件中，它會自動創建和緩存一個自簽名的證書。但我們推薦你創建和使用你自己的證書。

所以還需要安裝一個 @vitejs/plugin-basic-ssl 插件，執行命令

pnpm install @vitejs/plugin-basic-ssl -D

在開發環境使用即可，線上有正式簽名。

然後在 vite.config.js 中進行配置，如下：

...
import basicSsl from "@vitejs/plugin-basic-ssl";
export default defineConfig({
  resolve: {
    ...
  },
  plugins: [
    ...
    vue(),
    basicSsl()
  ],
  base: "/", // 打包路徑
  server: {
    host: "0.0.0.0",
    port: 3300, // 服務端口號
    open: true, // 服務啓動時是否自動打開瀏覽器
    cors: true, // 允許跨域
    https: true
    // proxy: {
    //   "/api/": {
    //     target: "https://xxx.xxx.cn",
    //     ws: true,
    //     changeOrigin: true
    //   }
    // }
  },
  ...
});

這樣就可以正常訪問了。

代理

上面提到可以在 vite.config.js 配置代理，通過代理可以解決跨越請求的問題。

比如我們在本機（localhost）上調試，請求服務端接口的時候因爲 host 不同導致跨域，這樣就導致 cookie 帶不過去，但是服務端接口又是通過 cookie 來檢驗用戶的，所以接口請求不成功。

類似的情況就可以用代理來解決，以 axios 爲例，具體怎麼使用這裏就不細說了，這裏只關注請求接口的代碼，如下：

export async function getUserInfo() {
  return request({
    url: "https://xxx.xxx.com/userInfo",
    method: "GET"
  }).catch(e => e);
}

一個請求用戶信息的接口，本地調試 cookie 帶不過去，導致獲取不到數據。

我們先設置一個代理，如下：

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

代理的 target 就是原服務接口的 host，這裏我們將 “/api” 路徑代理到原接口，簡單來說就是將 https://localhost:3300/api/xxx代理到https://xxx.xxx.com/xxx

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

這裏的 "/api" 是爲了與前端頁面路徑進行區分，所以在代理的時候需要通過rewrite去掉。

然後修改請求如下：

export async function getUserInfo() {
  return request({
    url: "/api/userInfo",
    method: "GET"
  }).catch(e => e);
}

這樣請求端口的時候因爲是 “localhost”，不跨域所以 cookie 正常，然後代理到原服務端接口就可以將 cookie 帶過去了。

代理還有另外一個作用，當前端頁面是 https 的時候，如果服務端接口是 http 則無法請求，瀏覽器會限制。通過設置代理就可以正常進行請求了。比如上面測試環境，就是將https://localhost:3300/apidev/xxx代理到http://dev.xxx.com/xxx

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/DpnRT85vS6ZdomEnc_3SLQ

server.https¶

猜你喜歡