vue项目打包后,部署在服务器上出现404解决办法

    技术2024-12-14  18

    今天把自己的vue-cli3项目打包后,在自己搭的阿里云服务器上测试时,出现页面空白,提示404,网上查了一下发现静态资源加载的问题,也就是路径出现问题。

    我是把打包好的dist文件放在了nginx服务器的html文件夹下面,dist目录下有打包好的css、js、和img文件。

    网上很多说是将vue.config.js里面的publicPath修改为“./”,但是我试了一下,还是不行,只显示了一个组件。然后我发现主页地址不对,按照我的配置,项目主页地址应该是http://服务器地址/dist/home,现在却是http://服务器地址/home

    然后我将打包好的文件提取到html路径下,删掉dist文件夹,发现项目可以完成部署。但是我在同一级目录下放了好几个项目,所以我必须配置好文件夹,于是我在网上查到一个办法配置静态资源相对于服务器根目录的相对路径

    publicPath: process.env.NODE_ENV === "production" ? "/dist/" : "/",

    ok辣~

    Processed: 0.055, SQL: 9