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

 更新时间:2024年07月05日 15:17:23   作者:survivorsfyh  
这篇文章主要介绍了Vue3在history模式下如何通过vite打包部署白屏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue3 在 history 模式下通过 vite 打包部署后白屏;

起因 hash 模式 url 后面跟个 # 强迫症犯了改成了 history,就此一波拉锯战开始了 ...

期间 nigix 和 router 各种反复排查尝试最终一波三折后可算是成功了 ...

Vue官方文档

具体配置可供参考如下:

先简要介绍下,当前项目打包部署不是在服务器的根目录下,所以 nigix 配置了一层 root 的指向;

一.nigix

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

try_files 即通过配置的 $url 按顺序进行目录下资源文件 index.html 的检索,返回其结果文件或文件夹,其中$uri $uri/若找不到则会进行内部重定向操作直至最后一个参数。

若文件不存在则会抛出 500 的错误异常。

root 若项目部署在服务器非根目录下,则需配置项目所在的子层级路径。

 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;
#}

二.打包环境 env 的 base 配置

Vue3 之后 设置 env 配置

切记以 VITE 开头,例如 VITE_BASE_URL

不然会导致识别不到而不生效 ....

针对不同的环境配置不同的 env 即可

通过 env 动态配置 vite 和 router 便于后期的统一变更

# 开发环境
# VUE_APP_BASE_API = ''

NODE_ENV = 'development'

VITE_APP_TITLE = 'development'
VITE_APP_BASE_API = 'https://testing.imed.org.cn'
## base 设置
VITE_BASE_URL = /marathon/

#开发环境接口地址
VITE_SERVE = 'https://testing.imed.org.cn'

三.vite.config.ts

config 配置config 配置

文件中设置 base 项,将 base 与 env 相关联

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 }) => {
  // 获取环境变量,通过 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 相关联
    server: {
      host: "0.0.0.0",
      port: 8000,
      proxy: {
        "/api": {
          // target: "http://192.168.12.108:8000", // 本机
          target: "https://testing.imed.org.cn", // 服务端接口域名(测试)
          changeOrigin: true, // //是否跨域
          // secure: true, // 是否https接口
          // ws: true, // 是否代理websockets
          // rewrite target目标地址 + '/abc',如果接口是这样的,那么不用重写
          rewrite: (path) => path.replace(/^\/api/, ""), // 路径重写,去掉 /api 前缀
        },
      },
    },
  };
});

四.vue-router

设置 history 模式并关联 base url

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

五.打包

如上配置好后根据不同环境重新打包部署进行测试即可

  "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"

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 在Vue中获取组件声明时的name属性方法

    在Vue中获取组件声明时的name属性方法

    今天小编就为大家分享一篇在Vue中获取组件声明时的name属性方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue3.0+vite2实现动态异步组件懒加载

    vue3.0+vite2实现动态异步组件懒加载

    学了vue写项目这么久,忽然发现路由懒加载的写法,节省了加载所有路由的时间。本文主要介绍了vue3.0+vite2实现动态异步组件懒加载,感兴趣的可以了解一下
    2021-06-06
  • vue2中使用axios及axios拦截器的配置教程

    vue2中使用axios及axios拦截器的配置教程

    众所周知Axios是一个基于promise的HTTP库,可以用在浏览器和 node.js中,下面这篇文章主要给大家介绍了关于vue2中使用axios及axios拦截器的配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Vue.js实现一个自定义分页组件vue-paginaiton

    Vue.js实现一个自定义分页组件vue-paginaiton

    这篇文章主要为大家详细介绍了Vue.js实现一个自定义分页组件vue-paginaiton的具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 关于Element UI table 顺序拖动方式

    关于Element UI table 顺序拖动方式

    这篇文章主要介绍了关于Element UI table 顺序拖动方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 浅谈vue的生命周期

    浅谈vue的生命周期

    这篇文章主要为大家介绍了vue的生命周期,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • vue自定义指令添加跟随鼠标光标提示框v-tooltip方式

    vue自定义指令添加跟随鼠标光标提示框v-tooltip方式

    这篇文章主要介绍了vue自定义指令添加跟随鼠标光标提示框v-tooltip方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue通过v-for实现年份自动递增

    Vue通过v-for实现年份自动递增

    这篇文章主要为大家详细介绍了Vue通过v-for实现年份自动递增,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • django+vue实现注册登录的示例代码

    django+vue实现注册登录的示例代码

    这篇文章主要介绍了django+vue实现注册登录的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • VUE 动态组件的应用案例分析

    VUE 动态组件的应用案例分析

    这篇文章主要介绍了VUE 动态组件的应用,结合具体案例形式分析了vue.js动态组件的应用场景、解决方案及相关操作技巧,需要的朋友可以参考下
    2019-12-12

最新评论