Vue3在history模式下如何通過vite打包部署白屏

更新時間：2024年07月05日 15:17:23 作者：survivorsfyh

這篇文章主要介紹了Vue3在history模式下如何通過vite打包部署白屏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一.nigix

try_files file ... uri && try_files file ... = code

try_files 即通過配置的 $url 按順序進行目錄下資源文件 index.html 的檢索，返回其結(jié)果文件或文件夾，其中$uri $uri/若找不到則會進行內(nèi)部重定向操作直至最后一個參數(shù)。

若文件不存在則會拋出 500 的錯誤異常。

root 若項目部署在服務(wù)器非根目錄下，則需配置項目所在的子層級路徑。

 location /marathon {
        default_type text/html;
        root  /data/servers/gateway/content/marathon; // 若部署在根目錄下,可去除該項
        index  index.html;
        try_files $uri $uri/ /index.html;
}

#根目錄方式如下
#location / {
#   try_files $uri $uri/ /index.html;
#}

二.打包環(huán)境 env 的 base 配置

Vue3 之后設(shè)置 env 配置

切記以 VITE 開頭，例如 VITE_BASE_URL

不然會導(dǎo)致識別不到而不生效 ....

針對不同的環(huán)境配置不同的 env 即可

通過 env 動態(tài)配置 vite 和 router 便于后期的統(tǒng)一變更

# 開發(fā)環(huán)境
# VUE_APP_BASE_API = ''

NODE_ENV = 'development'

VITE_APP_TITLE = 'development'
VITE_APP_BASE_API = 'https://testing.imed.org.cn'
## base 設(shè)置
VITE_BASE_URL = /marathon/

#開發(fā)環(huán)境接口地址
VITE_SERVE = 'https://testing.imed.org.cn'

三.vite.config.ts

在 config 配置config 配置

文件中設(shè)置 base 項，將 base 與 env 相關(guān)聯(lián)

import { fileURLToPath, URL } from "node:url";

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  // 獲取環(huán)境變量,通過 loadEnv 方式
  const env = loadEnv(mode, process.cwd());
  const BASE_URL = env.VITE_BASE_URL
  console.log(env);
  
  return {
    plugins: [vue(), vueJsx()],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
    base: BASE_URL, // 通過 loadEnv 將 env 中 VITE_BASE_URL 相關(guān)聯(lián)
    server: {
      host: "0.0.0.0",
      port: 8000,
      proxy: {
        "/api": {
          // target: "http://192.168.12.108:8000", // 本機
          target: "https://testing.imed.org.cn", // 服務(wù)端接口域名（測試）
          changeOrigin: true, // //是否跨域
          // secure: true, // 是否https接口
          // ws: true, // 是否代理websockets
          // rewrite target目標(biāo)地址 + '/abc'，如果接口是這樣的，那么不用重寫
          rewrite: (path) => path.replace(/^\/api/, ""), // 路徑重寫,去掉 /api 前綴
        },
      },
    },
  };
});

四.vue-router

設(shè)置 history 模式并關(guān)聯(lián) base url

const router = createRouter({
  /*
  createWebHistory 模式下
  nigix 需配置反向代理 location / { try_files $uri $uri/ /index.html; }
  */
  history: createWebHistory(import.meta.env.VITE_BASE_URL),
  routes
});

五.打包

如上配置好后根據(jù)不同環(huán)境重新打包部署進行測試即可

  "scripts": {
    "dev": "vite",
    "preview": "vite preview",
    "build": "run-p type-check \"build-only {@}\" --",
    "build-test": "vite build --mode dev",
    "build-dev": "vite build --mode development", 
    "build-prod": "vite build --mode production",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@tsconfig/node18": "^18.2.2",
    "@types/node": "^18.19.5",
    "@vitejs/plugin-vue": "^4.5.2",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/tsconfig": "^0.5.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "npm-run-all2": "^6.1.1",
    "typescript": "~5.3.0",
    "vite": "^5.0.10",
    "vue-tsc": "^1.8.25"