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实现坐标拾取器功能示例
Nov 18 Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 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
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python中的异常处理学习笔记
2015/01/28 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
python实现发送邮件及附件功能
2021/03/02 Python
python的unittest测试类代码实例
2017/12/07 Python
python方向键控制上下左右代码
2018/01/20 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
python 如何区分return和yield
2020/09/22 Python
重构Python代码的六个实例
2020/11/25 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
LINUX下线程,GDI类的解释
2016/12/14 面试题
党员群众路线承诺书
2014/05/20 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript