首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vite build打包后页面不能正常访问

解决vite build打包后页面不能正常访问的情况

2024-03-15 16:32:57 作者：零OO

这篇文章主要介绍了解决Vite打包后直接使用浏览器打开,显示空白问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vite build打包后页面不能正常访问

npm run build 后，生成了 dist 文件夹，将dist 文件中 index.html 打开不能正常看到页面内容

1.配置 vite.config.ts / vite.config.js文件

配置 base: ‘./’

export default defineConfig({
  base: './',
  // 、、、省略其他配置
})

2.修改路由模式为 Hash 模式

import { createRouter, createWebHashHistory } from 'vue-router'

配置好后，重新 “npm run build”，会覆盖之前的 dist 文件夹，重新打开 index.html 就可以访问了

错误信息

Some chunks are larger than 500 KiB after minification.

将文件块的大小限制改大一些

在vite.config.js中，build里添加或修改 chunkSizeWarningLimit 属性，单位为KiB

build: {
      chunkSizeWarningLimit: 1500
    }

或者js、css文件获取的路径为根目录

（1）配置base

将vite.config.js中的base属性设置为网页存放的目录

base: '/项目存放目录/'

（2）配置路由的history属性

将router的index.js中的createWebHistory方法添加项目存放的路径

const router = createRouter({
  history: createWebHistory("/项目存放目录"),
})

配置nginx location / 属性

location / {
   alias   /var/www/html/;
   index  index.html index.htm;
   try_files $uri $uri/ /项目存放目录/index.html;
}

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