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文件夹下的,ngix可以加一条配置

location /tool/ {
  try_files $uri $uri/ /tool/index.html;
}

如果打包上传的是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;
}

版权属于：东哥笔记 - DongGe.org

本文链接：https://dongge.org/blog/1235.html

自2017年12月26日起，『转载以及大段采集进行后续编辑』须注明本文标题和链接！否则禁止所有转载和采集行为！