Vue项目如何使用webpack打包部署到Tomcat

对于新建的 vue 项目如何使用 webpack 打包部署到 Tomcat 上,对于第一次接触的同学或许有些困难,感到无从下手,不过没关系,网上有很多教程提供大家参考,所以今天我就讲件我最近对 vue 项目打包部署的步骤,以及在打包的过程当中遇到的问题和注意事项记录下来供大家学习交流,俗话说:“好记性不如一个烂笔头”,更何况我们是做技术的,想要提高我们的技术就要不断在实践中总结和提升。

新建 Vue 项目 webpack 打包,部署到 Linux 服务器 Tomcat 上。

1,在 Linux 服务器下的 Tomcat 的 webapps 下创建 VueTest 文件夹
Vue 项目如何使用 webpack 打包部署到 Tomcat
2,配置 router/index.js 文件,增加 base: ‘/VueTest’,VueTest 就是 Tomcat 中 webapps 下文件路径

我在将应用发布到服务器上,发现当刷新当前路由的时候,就会出现 404 的状况,其实这是因为当刷新当前页面时候,所需要访问的资源在服务器上找不到,也就是说,我们在 Vue 发应用的过程中,设置路由的路径不是真实存在的路径,并且使用了 history 模式。解决方案是在 router/index.js 下加一个 base 路径,因为在部署的时候有一个文件夹,这个文件夹相当于一个基目录,路由没有这一层的话会报错

export default new Router({
  mode: 'history',
  base:'/VueTest/',
  routes: constantRourerMap
})

3,在项目运行“cnpm run build”命令,生成 dist 文件夹,dist 文件夹中包含 static 和 index.html
Vue 项目如何使用 webpack 打包部署到 Tomcat
4,将 dist 文件夹中 static 和 index.html 复制到 Tomcat 中 webapps 的 VueTest 文件夹中
Vue 项目如何使用 webpack 打包部署到 Tomcat
5,重启 Tomcat,访问 Linux 服务器 ip:8080/VueTest,即可访问到 Vue 项目

注意事项:

(1)在 vue-cli webpack 的模板下的/config/index.js,我们可以看到 assetsPublicPath 参数,将它从“/”变为了“./”
Vue 项目如何使用 webpack 打包部署到 Tomcat
(2)找到 build->utils.js,在里面加入一句 publicPath:“../../”
Vue 项目如何使用 webpack 打包部署到 Tomcat
配置这两个是因为我看到我的数据结构跟一般的不一样,下边是我的数据结构
Vue 项目如何使用 webpack 打包部署到 Tomcat
在 css 引图片的路径是

background: url('../../static/img/index.png') no-repeat top left ;

这样就可以访问 Vue 项目了

但是,页面刷新时出现 404 问题,这是个什么鬼,经过百度得出解决方案

此时访问页面应该基本的都可以跳转,但是刷新的时候突然发现报了 404,这个在网上查找了一下,原来是 HTML5 History 模式引发的问题,具体为什么,vue 官方已经给出了解释

根据官方给出的解决方案原理

你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

所以在 tomcat 服务器下你可以这么做。在打包好的项目根目录下新建一个 WEB-INF 文件夹,在 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>

这样的目的就是一旦出现 404 就返回到 index.html 页面。

以上就是今天码云笔记前端开发给大家介绍的 Vue 项目 webpack 打包部署到 Tomcat 上的具体操作步骤,希望对大家有所帮助,如果大家有任何疑问请给我留言,我会及时回复大家的。在此也非常感谢大家对码云笔记的支持!

「点点赞赏,手留余香」

10

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vue项目如何使用webpack打包部署到Tomcat

发表回复