Vue项目打包部署到Tomcat
一、使用 npm run build打包完成之后会出现一个dist文件夹,里面有static文件夹和一个index.html文件,一般我们部署在tomcat上面会将文件放在webapps文件夹下如果不进行任何修改将dist文件夹放进去的话,会出现资源路径错误的问题,因为config文件夹下index文件build默认的 assetsPublicPath:"/",除非部署的时候将dist文件...
·
一、
使用 npm run build打包完成之后会出现一个dist文件夹,里面有static文件夹和一个index.html文件,一般我们部署在tomcat上面会将文件放在webapps文件夹下
如果不进行任何修改将dist文件夹放进去的话,会出现资源路径错误的问题,因为config文件夹下index文件build默认的 assetsPublicPath:"/",除非部署的时候将dist文件里的文件放在webapps下,这样就很不科学,那我们如何解决这个问题呢
- 修改config文件夹下index文件中的build里的assetsPublicPath:"./"
- 修改router文件夹下index.js添加 base: ‘/文件夹名称/’ (例如:vue,可以自己随意设置)
- 在tomcat下webapps里面新建一个文件夹,名称是之前配置时设置的名称(vue)
- 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>
更多推荐
已为社区贡献4条内容
所有评论(0)