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

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

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

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

遇到的问题：

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同级)，编辑代码。

RewriteEngine On

RewriteBase /ibms/

RewriteRule ^index.html$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /ibms/index.html [L]

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

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

vue项目打包部署到服务器,Vue项目打包部署到apache服务器的方法步骤相关推荐

光猫连接水星路由器显示服务器,水星mw300r路由器连接光猫的设置方法步骤
水星mw300r无线路由器因其出色的性能.配置简单和超高的性价比,深受广大用户的喜欢;不过对于没有网络基础的用户来说,完成水星mw300r路由器与光猫的连接设置,任然有一定的困难,下面是学习啦小编给大 ...
linux怎么找到光盘路径,Linux服务器中如何查找rpm包及安装的方法步骤，Linux系统下应该如何挂载光盘...
Linux 服务器系统在使用时候经常遇到需要安装软件,我们当然可以通过 yum 命令来在线安装,但是在线安装往往因为网络或其他问题造成安装失败.还有一种就是也可以通过下载好的 rpm 包来进行安装,但 ...
wps总是显示服务器错误,wps表格打开遇到错误的解决方法步骤
<wps表格打开遇到错误的解决方法步骤>由会员分享,可在线阅读,更多相关<wps表格打开遇到错误的解决方法步骤(4页珍藏版)>请在人人文库网上搜索. 1.wps表格打开遇到错误 ...
苹果5s能开机显示无服务器,iphone5s无法开机　iphone5s不能开机解决方法步骤
遇上iphone5s无法开机怎么办呢?似乎很多果粉都遇到了iphone5s不能开机的故障,该如何解决?关于iphone5s无法开机的解决方法,下文有详细的操作步骤,大家可以参考一下. 第一步.将 US ...
CentOS7部署Apache服务器
这篇文章讲解如何在CentOS7上部署自己的Apache服务器. 文章目录一.Apache服务器简述二.部署Apache服务器 1.安装Apache 三.修改Apache默认配置(可选) 1.查看 ...
php服务器默认首页,如何修改Apache服务器的默认首页？
如何修改Apache服务器的默认首页? 发布时间:2020-05-22 17:36:49 来源:亿速云阅读:386 作者:鸽子 1.修改Apache服务器的默认首页: 访问Apache服务器时,默认 ...
Apache服务器和tomcat服务器区别
1.概述 Apache与Tomcat都是Apache开源组织开发的用于处理HTTP服务的项目,两者都是免费的,都可以做为独立的Web服务器运行.Apache是Web服务器而Tomcat是Java应用服 ...
（转）开源 Apache 服务器安全防护技术精要及实战
2019独角兽企业重金招聘Python工程师标准>>> Apache 一直是世界上使用率排名前三的 Web 服务器软件.企业使用其构建 Web 应用,从很大程度上都需要对其安全性进行 ...
HTTP 笔记与总结（7）HTTP 缓存（配合 Apache 服务器）
在网络上,有一些缓存服务器,另外浏览器自身也有缓存功能. 例如: <!DOCTYPE html> <html lang="en"> <head> ...
php_flag .htaccess,Apache服务器中.htaccess文件的实用配置示例集锦
.htaccess 是什么? htaccess (hypertext access,超文本访问) 是为网站所有者提供用于控制服务器环境变量以及其它参数的选项,从而增强他们网站的功能的文件.这些文件可以 ...

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

vue项目打包部署到服务器,Vue项目打包部署到apache服务器的方法步骤相关推荐

最新文章

热门文章