一、资源路径问题 (绝对路径、 相对路径)

打包上传到服务器时,前端代码不能使用绝对路径,然而默认打包后的html、js、css等文件使用的都是绝对路径,所以我们要在打包之前将绝对路径改为相对路径再打包。

首先理解两个概念:
1.什么是绝对路径
以根目录为起点到某一个目录的路径,能够完整描述文件所在位置(在硬盘上真正的路径)的路径就是绝对路径。
例如:c:/test/index.htm
网页中以http开头的链接都是绝对路径
2.什么是相对路径
从一个目录为起点到另外一个目录的路径
例如: …/test1/index.html

注:	 ./    代表当前所在的目录
		../   代表上一层目录
		/     代表根目录

区别
在开发中很少会使用绝对路径,上传到web服务器上浏览会出现问题。通常在网页里指定文件时使用相对路径。只要两个文件的相对位置没有改变,还在同一个目录内,那么无论上传到服务器的任何位置,都可以正确的显示。

如何将绝对路径改为相对路径?
在vue.config.js文件中,将publicPath:‘/’ 改为 ‘./’

// publicPath: '/',//把配置的static文件夹当成了根路径,
  publicPath: './',

注: vue2.0 和vue3.0 改的位置可能会有区别 assetsPublicPath: ‘./’

背景图片的引用问题
目前没有遇到这个问题,暂时不做记录。网上其他人说是改 publicPath:‘…/…/’

二、页面空白

打包放到服务器上之后页面打开是空白,首先检查是否是路径问题,如果路径没有问题,资源都能加载,那么就去检查路由模式。
前端路由的两种模式:
mode:‘hash’ //url带有#
mode:‘history’
router/index.js 路由配置默认的模式是hash,改为history模式需要后端配合,在服务端加一个覆盖了所有情况的候选资源,否则就会导致页面空白。

history模式与hash模式的区别
1.hash模式
通过改变锚点(#)更新URL,不会触发页面重新加载,可以通过window.onhashchange来监听hash的变化,无刷新跳转。
在hash模式下,所有的页面跳转都是客户端进行操作,因此对于页面拦截更加灵活;但每次url的改变不属于一次http请求,所以不利于SEO优化。
2.history模式
history模式改变url会导致浏览器向服务器发送请求,所以需要在服务器端做处理:如果匹配不到任何静态资源,则应该始终返回同一个 html 页面。

三、一些浏览器不支持es6语法,造成编译错误

目前没有遇到过,暂不做记录

Logo

前往低代码交流专区

更多推荐