項目打包部署到Tomcat

一、

使用 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/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>