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

<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服务器的更多相关文章

  1. vue项目打包部署到nginx 服务器上

    假如要实现的效果如下 http://ip/vue    =>是进入首页访问的路径是  usr/local/nginx/html/vue http://ip/website     =>是进 ...

  2. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  3. vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题

    本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...

  4. vue项目 打包部署上线

    1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...

  5. vue项目打包部署elementUI的字体图标丢失问题

    自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...

  6. vue项目打包部署到服务器,静态资源文件404

    js文件404问题        原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文件,将 assetsPublicPath修改为' ...

  7. Django项目部署到Apache服务器

    本文讲述的是在阿里云服务器(ECS)上部署Django项目于Apache,服务器操作系统为ubuntu,公网Ip地址为123.56.30.151. 将Django部署到Apache服务器的原因 Dja ...

  8. django项目部署在Apache服务器中,静态文件路径的注意点

    django Apache部署静态文件的路径注意点 静态文件放在对应的 app 下的 static 文件夹中 或者 STATICFILES_DIRS 中的文件夹中. 当 DEBUG = True 时, ...

  9. Tomcat热部署:Maven项目一键部署到Tomcat服务器 - 支持多环境

    参考:Eclipse中的Maven项目一键部署到Tomcat服务器 - 支持多环境部署 命令 debug模式设置关联源码 eclipse --> 项目右键 --> Debug As --& ...

随机推荐

  1. C#工具帮助类

    md5帮助类 .引入库 using System.Security.Cryptography;//引用Md5转换功能 .计算字符串的Md5值 public static string GetMD5Wi ...

  2. C 利用strtok, feof 截取字符串

    #cat /tmp/fff 10:hugetlb:/hello/06b11c9967cc0e106f5f4673246f671aa7388f623f58b250d9d9cb0f8c0f2b18 9:d ...

  3. Luogu 2951 捉迷藏Hide and Seek

    P2951 [USACO09OPEN]捉迷藏Hide and Seek 题目描述 Bessie is playing hide and seek (a game in which a number o ...

  4. [luogu4728 HNOI2009] 双递增序列 (dp)

    传送门 Solution 前几天刚做了类似题,这种将一个序列拆分为两个单调序列的题一般都是设\(dp[i]\)表示i为一个单调序列的末尾时,另一个序列的末尾是多少 然后应用贪心的思想,在这道题中就是让 ...

  5. Centos 7 关闭firewall防火墙启用iptables防火墙

    一.关闭firewall防火墙 1.停止firewall systemctl stop firewalld.service 2.禁止firewall开机启动 systemctl disable fir ...

  6. BZOJ 1051 HAOI 2006 受欢迎的牛

    [题解] 先用tarjan缩点,然后如果某个强联通分量的出度为0,则该强联通分量内的点数为答案,否则无解.因为若其他所有的强联通分量都有边连向Ai,则Ai必定没有出边,否则Ai连向的点所属的强联通分量 ...

  7. hdu 3500 DFS(限定)

    Fling Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submi ...

  8. 学习记录--如何将exec执行结果放入变量中?

    declare @num int, ) set @sqls='select @a=count(*) from tb ' exec sp_executesql @sqls,N'@a int output ...

  9. 清北学堂模拟赛d6t3 反击数

    分析:显然是一道数位dp题,不过需要一些奇怪的姿势.常规的数位dp能统计出一个区间内满足条件的数的个数,可是我们要求第k个,怎么办呢?转化为经典的二分问题,我们二分当前数的大小,看它是第几大的,就可以 ...

  10. LightOJ - 1148 - Mad Counting

    先上题目: 1148 - Mad Counting   PDF (English) Statistics Forum Time Limit: 0.5 second(s) Memory Limit: 3 ...