一、

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

如果不進(jìn)行任何修改將dist文件夾放進(jìn)去的話，會(huì)出現(xiàn)資源路徑錯(cuò)誤的問(wèn)題，因?yàn)閏onfig文件夾下index文件build默認(rèn)的 assetsPublicPath:"/"，除非部署的時(shí)候?qū)ist文件里的文件放在webapps下，這樣就很不科學(xué)，那我們?nèi)绾谓鉀Q這個(gè)問(wèn)題呢

修改config文件夾下index文件中的build里的assetsPublicPath:"./"

修改router文件夾下index.js添加 base: ‘/文件夾名稱(chēng)/’?? ?（例如：vue，可以自己隨意設(shè)置）

在tomcat下webapps里面新建一個(gè)文件夾，名稱(chēng)是之前配置時(shí)設(shè)置的名稱(chēng)（vue）

npm run build打包后將dist文件夾下的文件放在"vue"文件夾下

訪問(wèn)地址為?http://xxxxxxxxx/vue/

二、

如果出現(xiàn)css等文件404的問(wèn)題，細(xì)心觀察你會(huì)發(fā)現(xiàn)是資源路徑錯(cuò)誤，那要如何解決呢？

修改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的相對(duì)路徑）fallback: 'vue-style-loader'})} else {return ['vue-style-loader'].concat(loaders)}

三、

如果你的項(xiàng)目路由使用的模式是history模式，那么你一定會(huì)遇到上線后頁(yè)面刷新出現(xiàn)404的問(wèn)題

查閱文檔后發(fā)現(xiàn)如果使用history模式需要后端人員給予支持，直接在tomcat下webapps下你的項(xiàng)目文件夾中新建一個(gè)WEB-INF文件夾，里面創(chuàng)建一個(gè)web.xml文件，文件內(nèi)容為

<?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>

?

總結(jié)

以上是生活随笔為你收集整理的项目打包部署到Tomcat的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。