Vue项目部署tomcat，刷新报错404解决办法

vue建立项目使用脚手架有两种方式：

1，vue init webpack my

这种方式的项目打包，须要找到config/index.js文件将build中的assetsPublicPath: '/',修改为 assetsPublicPath: './',

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

，而后执行npm run build,会在根目录下生成dist文件夹

将dist下的文件扔到你的tomcat的webapps文件夹的项目下便可。

二、vue init webpack-simple my

这种状况下的项目没有config，这时候就不须要配置1中的index.js文件了，直接执行npm run build ,一样会生成dist文件夹，可是这种状况下dist下面没有index.js ，因此须要你手动将dist下的文件个index.js文件，一同复制到tomcat的webapps项目下，也会有1中的效果。

若是没有意外，这时候项目应该能够访问了，可是当你选择单页面路由的时候，再刷新页面会出现404，这种状况确定是要修复的，这时候就须要在tocmat的webapps下的项目中建立WEB-INF文件夹，在文件夹中建立文件web.xml。格式以下：

web.xml内容以下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    version="3.1" metadata-complete="true">
    <display-name>Router for Tomcat</display-name>
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

重启，刷新，完美修复。

转载请标明出处