几天之前打包自己的vue 项目上传到远程服务器上面 但是遇到了如下几个问题:

1. 线上浏览页面时是空白页面

2. 打包后资源文件(js, css 文件)引用的路径不正确

3. 开发环境中使用到的如:组件内部css 的背景图路径,通过 computed 属性计算返回的图片路径不正确问题

于是在网上参考了两篇文章便逐一解决了:

关于空白页面的问题,原因是 vue-router model 设置了 history 模式,解决方法有两个:

1、把model 改成 hash(直接删掉model 项即可)

2、设置baseUrl

然后是资源引用问题:

其实主要的还是webpack 配置的问题:

其一:要设置 prod.env.js 的如下配置

e8fbb28ae4c5b9baec2b3f9fd4f8ae4b.png

因为打包后的html 文件引用资源的路径 是 /static/js/xxxx 这样的,当在线上服务器中,这样的路径会变成请求服务器根目录下的static 目录下的文件,这样是不对的 因为通常前端页面的资源都会放在一个目录下,所以资源引用当然会出错。改变这个之后,资源路径就会变成  ./static/js/xxxx  这样就会请求前端目录里面的资源了

其二:要设置 utils.js 文件里面的配置,如下:

a52cd2e28bfeee76b4156de6bf0b1dc3.png

有时候,我们需要在不同的情况输出不同的图片 那么我们就需要用到 computed 属性按照情况返回不同的图片路径,但是这样存在一个问题:

我们在开发环境中输出的图片路径是以 App.vue 作参照物的,所以这样写没有问题(这个说法未必正确)

724ea4aa8fa19552f5027c69e9f0a242.png

但是打包后这样写会访问打包目录下js 目录下的 static/images/xxxx 的文件,这样就造成了路径错误了,按照上面的配置设置就没问题了,具体的原理有待研究

Logo

前往低代码交流专区

更多推荐