这篇文章将为大家详细讲解有关vue项目怎么打包扔向服务器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联长期为上1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为乌审企业提供专业的网站设计、成都网站建设,乌审网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中。我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上。
如果是 vue-cli (非 simple 脚手架),这篇文章可能有点帮助。地址链接:vue-cli 如何打包上线
先来描述一下期间遇到的问题有哪些:
1、打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404。
2、打包好的静态资源均是绝对路径,无法引入进项目,也是 404。
1、项目目录结构
这是打包后的,所以有 dist 文件夹,打包方式:npm run build。
2、webpack.config.js
这里只是一小部分,因为这边最关键的就是 publicPath,下面会提,这边可以解决静态资源 404 无法引入的问题。
3、npm run build 打包后的文件。
npm run build 打包后生成一个 dist 文件夹,这里面的目录:
我对 webpack 打包工具的原理不是很清楚,所以文件夹应该生成什么不是了解。我这边是这样子的。主要是一个主要的 build.js, 因为我们的 index.html 引入的就是这个 js 文件。还有一些图片文件和 ElementUI 生成的 ttf 和 woff。
4、如何放到服务器中。
接下来就是需要将生成的 dist 文件夹和 index.html 文件放到服务器中,只需要这两个。首先我将这两个文件放在同一个文件夹中,我命名为 gas(随意)。
然后将文件夹放到 tomcat 中,我将文件夹放到 tomcat 的 webapps 文件夹目录下:
ok 部署完成,启动 tomcat,你会发现显示一个空白页,一些静态资源都是 404。
5、解决空白页和静态资源无法引入的问题。
1、首先空白页的问题,可以重 f12 中看出来都是绝对路径的原因,而我们打包后,应该的引入路径是相对路径,这时我们需要的是修改 index.html 页面。
看一下没改之前的:
看我 /dist/build.js 引用的是绝对路径,这就导致了在 tomcat 去访问 index.html 页面时,报404。我们需要将路径变成相对路径 ./dist/build/。多一个点,很关键。好了到这里应该主页面可以显示了。
但是你会发现,我的静态资源,我的图片(不包括 img 形式的引入),例如我在 css 中 background:url() 的图片显示404。
2、解决静态资源失效的问题
这就需要修改我们的 webpack.config.js 中的 publicPath 了,默认的 vue-cli 脚手架环境搭建好后,publicPath 是这样的:
可以看到我们的路径是: /dist/。所以这时候我们如果打开页面,静态资源的路径都会是这样子的,并且报错404:http://10.0.0.181:8088/dist/bg.png?fe9b889cea51978538ce352593be0573
显然可以看出和我们想要的路径不一致,上面我贴出来的在 tomcat 的文件目录中我将 dist 和 index.html 都放进了一个 gas 的文件夹中。所以正确的路径应该是这样的:http://10.0.0.181:8088/gas/dist/bg.png?fe9b889cea51978538ce352593be0573
看出区别了吗!
解决:
所以我需要改变一下 webpack.config.js 中的输出路径 publicPath: /gas/dist/。将最外层的文件夹路径加进去,这样就可以将静态资源引入进项目了。
ok,到现在为止,最主要的两个问题解决了,一个是 index.html 空白页,另一个是 静态资源路径不正确的问题。
6、index.html 页面中的link 和 srcipt 引用的资源失效问题:
原因还是路径的地址不对:
妥协的解决方法是:将自己引用的资源手动放到打包出来的 dist 文件夹内,然后在 index.html 中按照 dist 的相对路径进行引用。
代码中的 icon.ico 就是我手动将 icon 图标放到 dist 文件夹中,然后按照对应的引用路径进行引用。其他的 css 和 js 引用一样。
7、待解决的问题:
1、在我的项目中,使用了 ElementUI 框架,但是在打包放到服务器中后,发现按钮样式变了,所有的 padding 失效,所有我只能自己手动进行添加样式。
2、在我的 index.html 中如果引入 link css文件时,还是没办法引入相对路径,所以我将 css 样式都放到了各自的组件中的 style 中了,其他的一般都是用 npm 注入依赖的形式进行安装。
8、网上搜索到的相关问题和解决方法。
1、求助!Vue项目用Webpack打包后放到服务器上,但访问是空白页?弄了好久了也不知道什么原因
2、vue项目中,npm run build生成的index.html文件只有放在根目录下打开才能生效,怎么解决?
3、Vue应用部署到服务器的正确方式
关于“vue项目怎么打包扔向服务器”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
当前标题:vue项目怎么打包扔向服务器-创新互联
地址分享:https://www.cdcxhl.com/article18/ceccdp.html
成都网站建设公司_创新互联,为您提供做网站、全网营销推广、服务器托管、定制网站、网站收录、动态网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联