方法一

缺点：需要和部署的路径保持一致，不是很灵活

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模式要’/‘,使用这种方法会导致图片无法加载以及一些其他问题

开发环境使用/,部署到服务器上使用./

这种能保证静态资源能访问到，但是图片访问又有问题，需要再调整，比较麻烦，还会产生其它问题，history和hash模式配置还不一样