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資料夾的專案下即可。

2、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>
 

重啟，重新整理，完美修復。

轉載請標明出處