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

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

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

1，在Linux服务器下的Tomcat的webapps下创建VueTest文件夹

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

4，将dist文件夹中static和index.html复制到Tomcat中webapps的VueTest文件夹中

5，重启Tomcat，访问Linux服务器ip:8080/VueTest，即可访问到Vue项目

注意事项：

(1)在vue-cli webpack的模板下的/config/index.js，我们可以看到assetsPublicPath参数，将它从“/”变为了“./”

(2)找到 build->utils.js,在里面加入一句publicPath:“../../”

配置这两个是因为我看到我的数据结构跟一般的不一样，下边是我的数据结构

在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。

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

Router for Tomcat

404

/index.html

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

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