Vue项目打包后,部署在服务器,访问页面出现空白一片

"好一似,食尽鸟投林,只剩下白茫茫大地,倒也真干净!"

'' Vue项目打包后,部署在服务器,访问页面出现空白一片, 到也真干净!"

一. Vue项目打包

按部就班的开发完程序后, 每个厨艺精湛的程序猿都迫切的想打包部署运行. 但是, 程序猿的世界,不如意的事情,十之九九.

运行这个牛X的指令, 并如下图一样,即打包成功了.

npm run build

 二.部署运行

将打包生成的dist文件夹, 放在服务器中, 浏览器访问, 发现访问成功,但是页面是空白的,怎么办呢? 机智的你,先不要看下面的解决方法, 猜一下好不好.

出现这种情况要分两个处理方式(vue-cli2和vue-cli3),先说vue-cli2; 首先找到config/index.js文件,将assetPublicPath的路径改为“./”即可,

vue-cli3的话要稍微麻烦些,因为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里面加上

就可以了, 不然的话刷新页面就会报错404, 当然这是把项目放在二级路由的情况下, 如果是一级路由的话就可以不用加base这个属性, 

最终效果如下。

这里就完成了vue打包到部署的流程了,希望对大家有些许的帮助吧。

 

 

 

 

 

 

如果vue3项目打包后无法请求到后台接口,可能是因为以下原因: 1.后台接口路径错误:部分服务器的配置可能不同,导致后台接口的路径和本地环境中的路径不一致。因此,需要确保在部署服务器之前,后台接口的路径是正确的。 2.服务端口号被占用:如果本地环境中使用的端口号在服务器上已被占用,则服务无法启动。因此,需要确保服务端口号是正确的,并且与服务器上的其它服务不冲突。 3.服务器未正确安装相关依赖:如果服务器未正确安装vue3项目所需的相关依赖,则无法正常运行。因此,在部署服务器之前,需要确保服务器上已经安装了vue3项目所需的相关依赖。 4.浏览器中存在跨域问题:因为vue3项目打包后生成的是静态资源文件,所以在浏览器中可能会遇到 CORS 跨域问题。为避免这种情况,需要在后台配置跨域请求支持,或者使用代理解决跨域问题。 针对上述问题,可以通过以下解决方案来解决: 1.检查后台接口路径是否正确,并确保路径是服务器上的实际路径。 2.检查服务器上的端口号是否正确,避免与其它服务冲突。 3.确保服务器上已经安装了vue3项目所需的相关依赖。 4.使用代理或在后台配置跨域请求支持。 总之,针对以上问题,需要逐一排查,逐步解决,才能保证vue3项目打包后正常部署服务器并能与后台接口进行正常通讯。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值