vue项目(vue-cli2,vue-cli3)打包后出现空白解决方案

出现这种情况要分两个处理方式(vue-cli2和vue-cli3)
**

vue-cli2;

**

首先找到config/index.js文件,将assetPublicPath的路径改为“./”即可,

在这里插入图片描述

**

vue-cli3:

**

在根目录下创建vue.config.js文件,在文件里面加入以下代码

module.exports = {

    assetsDir: 'static',

    parallel: false,

    publicPath: './',

}

在这里插入图片描述
到了这步本来就可以了,但是有的还是没有显示出来,那是因为你的路由模式的关系,你把你的路由模式改成“hash”就行了,虽然有点丑陋,但是至少功能出来了。

如果你不想使用“hash”模式,非要用历史模式的话,本地是不行的,必须要服务器配合,这里就说下怎么使用nginx配合vue使用历史模式

安装nginx就不说了 ,假设你已经安装好了nginx,在server里面加上

location /aaa {
            alias   D:/bbb/ccc;
            index  index.html index.htm;
            try_files $uri $uri/ /aaa/index.html;
        }

其中/aaa是需要访问的地址, D:/bbb/ccc是你文件真实存放的路径,index指的就是你的入口文件,你的文件名如果不是index.html的话就替换成你的入口文件的名字,这里面最重要的是 try_files $uri $uri/ /aaa/index.html 这句话,这句话主要就是用来处理vue的历史模式的,在配置完nginx后, 还要在项目里面加点东西, 其实也很简单, 就在项目的src目录里面加上

在这里插入图片描述

在config/index.js里面加上

在这里插入图片描述
最终效果如下:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值