当你使用 Umi 打包应用后,如果发现资源引用的路径没有正确地更新以适应新的部署路径,你可以按照以下步骤进行修改:
1、修改base配置
config/config.ts
或 config/config.[env].ts
,设置 base
属性来定义应用的基础路径。
export default {
base: '/my-deploy-path/',
};
2、更新 HTML 模板:
如果你使用了自定义的 HTML 模板,在模板中添加 <base>
标签,确保所有相对路径的资源引用都基于这个基础路径。
<!DOCTYPE html> <html> <head> <base href="/my-deploy-path/"> <!-- 其他头部标签 --> </head> <body> <!-- 页面内容 --> </body> </html>
3、检查静态资源引用: 在 dist
目录下的 index.html
文件中,检查所有的静态资源引用(如 CSS、JavaScript 文件等),确保它们使用了正确的路径。如果使用了相对路径,它们应该相对于 <base>
标签的 href
属性。
4、使用 Umi 的公共路径: 如果你的资源引用是绝对路径,确保它们与 Umi 的公共路径(通常是 publicPath
配置)一致。这可以在 config/config.ts
中设置:
export default {
publicPath: '/my-deploy-path/',
};
5、就是重新打包构建