这篇文章将为大家详细讲解有关vue项目怎么打包扔向服务器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
当我们将vue项目完成后,面临的就是如何将项目进行打包上的线,放到服务器中。我使用的是vue-cli(简单的)脚手架,所以就讲一下如何将项目进行打包,并放到tomcat上只
如果是vue-cli(非简单的脚手架),这篇文章可能有点帮助。地址链接:vue-cli如何打包上线
先来描述一下期间遇到的问题有哪些:
1,打包后将dist文件夹和索引。html放到tomcat,在浏览器中访问时,出现空白页,f12提示404。
2,打包好的静态资源均是绝对路径,无法引入进项目,也是404 .
<强> 1项目目录结构
这是打包后的,所以有dist文件夹,打包方式:npm运行构建。
<强> 2,webpack.config。js
这里只是一小部分,因为这边最关键的就是publicPath、下面会提,这边可以解决静态资源404年无法引入的问题。
<强> 3,npm运行构建打包后的文件。
npm运行构建打包后生成一个dist文件夹,这里面的目录:
我对webpack打包工具的原理不是很清楚,所以文件夹应该生成什么不是了解。我这边是这样子的。主要是一个主要的构建。js,因为我们的指数。html引入的就是这个js文件。还有一些图片文件和ElementUI生成的ttf和woff。
<强> 4,如何放到服务器中。
接下来就是需要将生成的dist文件夹和索引。html文件放到服务器中,只需要这两个。首先我将这两个文件放在同一个文件夹中,我命名为气体(随意)。
然后将文件夹放到tomcat中,我将文件夹放到tomcat的webapps文件夹目录下:
好部署完成,启动tomcat,你会发现显示一个空白页,一些静态资源都是404 .
<强> 5,解决空白页和静态资源无法引入的问题。
1,首先空白页的问题,可以重f12中看出来都是绝对路径的原因,而我们打包后,应该的引入路径是相对路径,这时我们需要的是修改指数。html页面。
看一下没改之前的:
看我/dist/构建。js引用的是绝对路径,这就导致了在tomcat去访问指数。html页面时,报404。我们需要将路径变成相对路径。/dist/构建/６嘁桓龅?很关键。好了到这里应该主页面可以显示了。
但是你会发现,我的静态资源,我的图片(不包括img形式的引入),例如我在css中背景:url()的图片显示404。
2,解决静态资源失效的问题
这就需要修改我们的webpack.config。js中的publicPath了,默认的vue-cli脚手架环境搭建好后,publicPath是这样的:
可以看到我们的路径是:/dist/Ｋ哉馐焙蛭颐侨绻蚩趁?静态资源的路径都会是这样子的,并且报错404:<代码> http://10.0.0.181:8088/dist/bg.png吗?fe9b889cea51978538ce352593be0573
显然可以看出和我们想要的路径不一致,上面我贴出来的在tomcat的文件目录中我将dist和索引。html都放进了一个气体的文件夹中,所以正确的路径应该是这样的:
<代码> http://10.0.0.181:8088气体/dist/bg.png吗?fe9b889cea51978538ce352593be0573
看出区别了吗!
<强>解决:
所以我需要改变一下webpack.config。js中的输出路径publicPath:/天然气/dist/＝钔獠愕奈募新肪都咏?这样就可以将静态资源引入进项目了。
好的,到现在为止,最主要的两个问题解决了,一个是指数。html空白页,另一个是静态资源路径不正确的问题。
<强> 6,指数。html页面中的链接和srcipt引用的资源失效问题:
