浅谈vue项目如何打包扔向服务器


Posted in Javascript onMay 08, 2018

当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中。我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上。 

如果是 vue-cli (非 simple 脚手架),这篇文章可能有点帮助。地址链接:vue-cli 如何打包上线

先来描述一下期间遇到的问题有哪些:

1、打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404。
2、打包好的静态资源均是绝对路径,无法引入进项目,也是 404。

1、项目目录结构

浅谈vue项目如何打包扔向服务器

这是打包后的,所以有 dist 文件夹,打包方式:npm run build。

2、webpack.config.js

浅谈vue项目如何打包扔向服务器

这里只是一小部分,因为这边最关键的就是 publicPath,下面会提,这边可以解决静态资源 404 无法引入的问题。

3、npm run build 打包后的文件

npm run build 打包后生成一个 dist 文件夹,这里面的目录:

浅谈vue项目如何打包扔向服务器

我对 webpack 打包工具的原理不是很清楚,所以文件夹应该生成什么不是了解。我这边是这样子的。主要是一个主要的 build.js, 因为我们的 index.html 引入的就是这个 js 文件。还有一些图片文件和 ElementUI 生成的 ttf 和 woff。

4、如何放到服务器中。

接下来就是需要将生成的 dist 文件夹和 index.html 文件放到服务器中,只需要这两个。首先我将这两个文件放在同一个文件夹中,我命名为 gas(随意)。

浅谈vue项目如何打包扔向服务器

然后将文件夹放到 tomcat 中,我将文件夹放到 tomcat 的 webapps 文件夹目录下:

浅谈vue项目如何打包扔向服务器

浅谈vue项目如何打包扔向服务器

ok 部署完成,启动 tomcat,你会发现显示一个空白页,一些静态资源都是 404。

5、解决空白页和静态资源无法引入的问题。

1、首先空白页的问题,可以重 f12 中看出来都是绝对路径的原因,而我们打包后,应该的引入路径是相对路径,这时我们需要的是修改 index.html 页面。

看一下没改之前的:

浅谈vue项目如何打包扔向服务器

看我 /dist/build.js 引用的是绝对路径,这就导致了在 tomcat 去访问 index.html 页面时,报404。我们需要将路径变成相对路径 ./dist/build/。多一个点,很关键。好了到这里应该主页面可以显示了。

但是你会发现,我的静态资源,我的图片(不包括 img 形式的引入),例如我在 css 中 background:url() 的图片显示404。

2、解决静态资源失效的问题

这就需要修改我们的 webpack.config.js 中的 publicPath 了,默认的 vue-cli 脚手架环境搭建好后,publicPath 是这样的:

浅谈vue项目如何打包扔向服务器

可以看到我们的路径是: /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 的相对路径进行引用。

浅谈vue项目如何打包扔向服务器

代码中的 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应用部署到服务器的正确方式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
理解javascript正则表达式
Mar 08 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
Javascript实现购物车功能的详细代码
May 08 #Javascript
vue-cli 如何打包上线的方法示例
May 08 #Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 #Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 #Javascript
angularjs实现的购物金额计算工具示例
May 08 #Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 #Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 #Javascript
You might like
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
python 获取本机ip地址的两个方法
2013/02/25 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
python实现控制台打印的方法
2019/01/12 Python
python实现网页自动签到功能
2019/01/21 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
数据库的约束含义
2012/09/09 面试题
中学家长会邀请函
2014/01/17 职场文书
创先争优活动方案
2014/02/12 职场文书
数控专业自荐书范文
2014/03/16 职场文书
电子专业求职信
2014/06/19 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
银行稽核岗位职责
2015/04/13 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
MySQL 开窗函数
2022/02/15 MySQL