tomcat nginx部署vue 项目常见问题

• 一：vue history模式（不带#）

1. Tomcat

• 刷新404问题
• conf>web.xml下面新增代码

      //避免层级乱 最下面添加就行 
      <error-page>
          <error-code>404</error-code>
              <location>/index.html</location>
      </error-page>
  </web-app>

   

• 路径问题

  • 打包时 vue.config.js publicPath 设置

    publicPath: process.env.NODE_ENV === "production" ? "/xxx/" : "/",
    outputDir: "dist",
    assetsDir: "static",

    route.js设置base

  • const router = new VueRouter({
      routes,
      mode: "history",
      base: "/xxx",
    });

     

• xxx代表tomcat下 webapps容器名称

       访问时如果路由的base 如果没有设置 直接访问  ip+端口+/aa 如果设置了，访问地址为 ip+端口+/xxx/aa   aa表示路由path 即页面

2. Nginx

• 刷新404问题 
• conf>nginx.conf下修改为 

•  location / {
              root   html;
              index  index.html index.htm;
              try_files $uri $uri/ /wechat/index.html; 
  			#解决页面刷新404问题  每次刷新时都重新导航到该index.html 由程序接管
  		
     }
  // 注意wechat 此代表html文件夹下web容器 

  路径问题同tomcat