方法一
缺点：需要和部署的路径保持一致，不是很灵活
1、在环境变量.env中定义url前缀
BASE_URL=/admin/
2、定义vue路由前缀路径router/index.js
const createRouter = () =>
new Router({
mode: 'history',
base: process.env.BASE_URL,
// mode: 'hash',
routes: constantRouterMap
})
.........3、vue配置公共路径前缀vue.config.js
const vueConfig = {
// publicPath: process.env.NODE_ENV === "development" ? "/" : "./",
publicPath: process.env.BASE_URL,
outputDir:'dist',
.........
4、打包部署到nginx或其他中间件，此时要保证前缀和部署的前缀保持一致
nginx
location /admin/ {
index index.html index.htm;
try_files $uri $uri/ /admin/index.html;
}
方法二
1、使用history模式
2、定义vue路由前缀路径router/index.js
3、vue配置公共路径前缀vue.config.js
// publicPath: process.env.NODE_ENV === 'development' ? '/' : './', // history改为 ’./‘ ,hash模式要’/‘,使用这种方法会导致图片无法加载以及一些其他问题
开发环境使用/,部署到服务器上使用./文章来源：https://www.toymoban.com/news/detail-672155.html
这种能保证静态资源能访问到，但是图片访问又有问题，需要再调整，比较麻烦，还会产生其它问题，history和hash模式配置还不一样文章来源地址https://www.toymoban.com/news/detail-672155.html
到了这里，关于[绍棠] Ant Design Pro of Vue打包有前缀静态资源访问不到的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
