Tomcat发布VUE CLI2项目详细及问题

Tomcat发布VUE CLI2项目详细及问题

1 发布过程

1.1 修改配置: build/webpack.prod.conf.js

output: {
  publicPath: '/xxx/' //打包文件夹的名称
}

1.2 项目根目录执行npm run build重新打包

npm run build

打包完成后根目录生成一个dist文件，

1.3 修改 dist 文件夹为项目名称: xxx

 

1.4 将 xxx 拷贝到运行的 tomcat 的 webapps 目录下

访问: http://localhost:8080/xxx

你以为可以了么，哈哈一般是可以了，具体问题如下

 

2 问题记录

2.1 打包后，无法正常访问/static目录下静态资源

（1）解决方式一：网上查询，修改config/index.js文件，将assetsPublicPath: '/'修改为assetsPublicPath: './',

然并卵。。问题并没有解决

可能是，我自己使用方式的问题，因为毕竟有人通过该方式解决过

（2）解决方式二：暴力点，直接将打包后的文件放在ROOT目录下

  使用开发者模式，查看静态资源请求错误地址http://host:port/static/...

既然如此，暴力点直接将打包后的文件放在ROOT下

注意使用该方式需要修改配置: build/webpack.prod.conf.js，如下

output: {
  publicPath: '/' 
}

否则将导致，无法访问打包后的app文件及vendor.js等

然后静态资源可以访问了，然后白屏了

 

2.2 部署成功后，路由导致白屏

（1）方式一：修改路由，不要使用history模式

export default new Router({
  routes: [
    ...globalRoutes,
    ...homePageRouter
  ]
})

（2）方式二：使用history模式，修改tomcat配置文件server.xml

<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

conf\Catalina\localhost目录新增rewrite.config文件

#rewrite for tomcat
#内容解释 第一个规则是如果匹配到index.html文件不进行重写
RewriteRule ^/index\.html$ - [L]

#第二个规则，如果请求路径不是项目中的静态资源，跳转到 index.html 交给vue-router处理。
RewriteCond %{REQUEST_PATH} !-f
RewriteRule (.*) /index.html [L]

详细参考：VUE部署到tomcat报404问题处理

2.3  网站可以正常访问了，tomcat部署vue  proxyTable失效

修改nginx的配置文件nginx.conf，将后端服务改成对应的请求

        location /api {
            #后端的Web服务器获取用户真实IP
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            
            # 反向代理地址
            proxy_pass http://website_admin_server; 
        }

 

2.4 前端a标签，<a href="/home" ></a>失效

使用router-link

<router-link :to="`/home`">
    <a href="javaScript:;" ></a>
</router-link>