• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
浩渺小竹排浩az 显示全部楼层 发表于 2021-10-25 20:29:57 |阅读模式 打印 上一主题 下一主题
vue项目在开发情况下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器。
但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包,打包后会在项目目次下天生一个dist文件夹,内容如下:

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

遇到的问题:

1. 直接去访问http://www.xxx.com/ibms/,会发现网页是白屏的,什么都没有,这就比较奇怪了,着实是因为资源加载的路径有问题!
办理方法:
在config中的index.js里build下修改webpack配置:
  1. assetsPublicPath: '/ibms/'
复制代码
在router中的index.js配置中加上:
  1. export default new Router({
  2. mode: 'history',
  3. scrollBehavior: () => ({ y: 0 }),
  4. base: '/ibms/', // 加上这一行
  5. routes: constantRouterMap
  6. })
复制代码
接下来再重新npm run build打包,然后丢到服务器上ibms文件夹下,这时页面就可以正常访问了。
2. 在当前页面刷新大概用url栏访问某个子页面,效果发现网页404了,这是因为vue路由的mode是history模式。
办理方法:
把全部的哀求全部转发到http://www.xxx.com/ibms/index.html上就可以了
我这里用的是apache做的web服务器,在ibms目次下新建.htaccess文件(跟index.html同级),编辑代码。
  1. <IfModule mod_rewrite.c>
  2.   RewriteEngine On
  3.   RewriteBase /ibms/
  4.   RewriteRule ^index\.html$ - [L]
  5.   RewriteCond %{REQUEST_FILENAME} !-f
  6.   RewriteCond %{REQUEST_FILENAME} !-d
  7.   RewriteRule . /ibms/index.html [L]
  8. </IfModule>
复制代码
这个配置的作用就是把全部服务器上不存在哀求全部转发到index.html上去。(PS:记得要重启apache服务器哦)
到此这篇关于Vue项目打包部署到apache服务器的方法步调的文章就介绍到这了,更多相干Vue项目打包部署到apache内容请搜刮草根技术分享以前的文章或继续欣赏下面的相干文章盼望大家以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作