vue3打包生成的文件,如果是部署在二级目录,因为页面加载的路径是从根目录开始的,所以会出现打开白屏的问题。

比如部署在hdd.im/tool,如果build直接打包出来的文件如果直接拖到tool目录,就会出现js找不到导致白屏问题。

一、设置路由文件

因为我是用的History模式,可以去掉恶心的#符号,所以路由router这么设置

const router = createRouter({
    history: createWebHistory('/tool/'),
    routes
})

二、设置打包配置,修改vite.config.js文件

在defineConfig中增加一行base的目录设置

export default defineConfig({
    base: '/tool/', 
})

如果打包上传的是dist文件夹,比如vue的打包文件路径是这样/tool/dist/xxxx,那么再增加一个nginx配置

location /tool {
    alias tool/dist/;     #这里需要alias
    index  index.html index.htm;
    try_files $uri $uri/ tool/dist/index.html;
}

☟☟可点击下方广告支持一下☟☟

最后修改:2024 年 01 月 11 日
请我喝杯可乐,请随意打赏: ☞已打赏列表