一、

使用 npm run build打包完成之后會出現一個dist文件夾，里面有static文件夾和一個index.html文件，一般我們部署在tomcat上面會將文件放在webapps文件夾下

如果不進行任何修改將dist文件夾放進去的話，會出現資源路徑錯誤的問題，因為config文件夾下index文件build默認的 assetsPublicPath:"/"，除非部署的時候將dist文件里的文件放在webapps下，這樣就很不科學，那我們如何解決這個問題呢

1. 修改config文件夾下index文件中的build里的assetsPublicPath:"./"
2. 修改router文件夾下index.js添加 base: ‘/文件夾名稱/’?? ?（例如：vue，可以自己隨意設置）
3. 在tomcat下webapps里面新建一個文件夾，名稱是之前配置時設置的名稱（vue）
4. npm run build打包后將dist文件夾下的文件放在"vue"文件夾下

訪問地址為?http://xxxxxxxxx/vue/

二、

如果出現css等文件404的問題，細心觀察你會發現是資源路徑錯誤，那要如何解決呢？

修改build下的utils.js文件

// Extract CSS when that option is specified// (which is the case during production build)if (options.extract) {return ExtractTextPlugin.extract({use: loaders,publicPath: '../../',             //添加該行（解釋：pubicpath為打包后app.css至index.html的相對路徑）fallback: 'vue-style-loader'})} else {return ['vue-style-loader'].concat(loaders)}

三、

如果你的項目路由使用的模式是history模式，那么你一定會遇到上線后頁面刷新出現404的問題

查閱文檔后發現如果使用history模式需要后端人員給予支持，直接在tomcat下webapps下你的項目文件夾中新建一個WEB-INF文件夾，里面創建一個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/javaeehttp://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>

?