Vue项目打包部署到apache服务器的方法步骤


Posted in Vue.js onFebruary 01, 2021

vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器。

但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包,打包后会在项目目录下生成一个dist文件夹,内容如下:

Vue项目打包部署到apache服务器的方法步骤

然后就是把这些文件丢到服务器上的某个文件夹下,我这里的文件夹名字是ibms

Vue项目打包部署到apache服务器的方法步骤

遇到的问题:

1. 直接去访问http://www.xxx.com/ibms/,会发现网页是白屏的,什么都没有,这就比较奇怪了,其实是因为资源加载的路径有问题!

解决方法:

在config中的index.js里build下修改webpack配置:

assetsPublicPath: '/ibms/'

在router中的index.js配置中加上:

export default new Router({
 mode: 'history',
 scrollBehavior: () => ({ y: 0 }),
 base: '/ibms/', // 加上这一行
 routes: constantRouterMap
})

接下来再重新npm run build打包,然后丢到服务器上ibms文件夹下,这时页面就可以正常访问了。

2. 在当前页面刷新或者用url栏访问某个子页面,结果发现网页404了,这是因为vue路由的mode是history模式。

解决方法:

把所有的请求全部转发到http://www.xxx.com/ibms/index.html上就可以了

我这里用的是apache做的web服务器,在ibms目录下新建.htaccess文件(跟index.html同级),编辑代码。

Vue项目打包部署到apache服务器的方法步骤

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /ibms/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /ibms/index.html [L]
</IfModule>

这个配置的作用就是把所有服务器上不存在请求全部转发到index.html上去。(PS:记得要重启apache服务器哦)

到此这篇关于Vue项目打包部署到apache服务器的方法步骤的文章就介绍到这了,更多相关Vue项目打包部署到apache内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
ant design vue的form表单取值方法
Jun 01 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 #Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 #Vue.js
vue-video-player 断点续播的实现
Feb 01 #Vue.js
Vite和Vue CLI的优劣
Jan 30 #Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 #Vue.js
vue监听键盘事件的相关总结
Jan 29 #Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 #Vue.js
You might like
一个用于MySQL的PHP XML类
2006/10/09 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python脚本实现网卡流量监控
2015/02/14 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
pandas去除重复列的实现方法
2019/01/29 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
2015年少先队活动总结
2015/03/25 职场文书
雾霾停课通知
2015/04/24 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang