Vue History 模式配置文档一、前端配置以下示例假设项目访问路径为/main-app/。1.vue.config.jsmodule.exports{publicPath:/main-app/,outputDir:dist};publicPath必须与实际访问前缀保持一致否则静态资源路径会错误。2. 路由配置importVuefromvue;importRouterfromvue-router;importHomefrom/views/Home.vue;importAboutfrom/views/About.vue;Vue.use(Router);exportdefaultnewRouter({mode:history,base:/main-app/,routes:[{path:/,name:Home,component:Home,},{path:/about,name:About,component:About,},],});mode必须设置为historybase必须与publicPath保持一致。二、Nginx 配置以下示例假设打包后的文件部署在/iplm/main-app/且该目录下直接包含index.html、js/、css/等文件。server { listen 9002; server_name 10.201.3.131; location /main-app { return 301 /main-app/; } location /main-app/ { root /iplm; index index.html; try_files $uri $uri/ /main-app/index.html; } }配置说明location /main-app将不带结尾斜杠的访问统一重定向到/main-app/location /main-app/处理该项目下的所有请求try_files $uri $uri/ /main-app/index.html;当请求不是实际静态文件时回退到index.html交由前端路由处理三、部署目录结构/iplm/main-app/index.html /iplm/main-app/js/... /iplm/main-app/css/... /iplm/main-app/img/...四、配置一致性要求前端publicPath必须是/main-app/前端路由base必须是/main-app/Nginx location前缀必须是/main-app/部署目录必须与Nginx指向路径一致如果项目不是部署在/main-app/只需要把以上配置中的/main-app/统一替换为实际访问前缀即可。