VUE项目打包后的文件页面路由在服务器上出错打不开

npm run build打包后的dist文件发布到服务器上之后,用服务器路径结合vue路由打开网页,发现浏览器控制台报错xxx.js文件找不到,页面打不开,比如我遇到下面这种

VUE项目打包后的文件页面路由在服务器上出错打不开_第1张图片
image.png

通过控制台我们看到该文件用的是绝对路径,如果我们的代码放在该域名文件的根目录下,是不会出现这个报错的,既然出现了这个报错,我们先查看下自己的服务器文件是怎样

VUE项目打包后的文件页面路由在服务器上出错打不开_第2张图片

可以看到,我们的项目文件不是放在www.xxx.cn域名的根目录下,这样在引用文件时就会报错找不到,对于此项目,我们需要的是引入vue打包后的dist文件下的static里面的js文件,而我们看报错提示就会发现我们引用的文件路径不对,这样将问题定位到文件引入的路径方向。

所以我们打开VUE项目的config文件夹下的index.js文件,找到build的配置
默认是这样:

VUE项目打包后的文件页面路由在服务器上出错打不开_第3张图片
image.png

这样表示服务器的绝对路径,我们这里需要改为相对路径才能准确的引入文件,运行项目

VUE项目打包后的文件页面路由在服务器上出错打不开_第4张图片
image.png

这样就可以了。

你可能感兴趣的:(VUE项目打包后的文件页面路由在服务器上出错打不开)