每个月一次的技术文档是一个总结的过程,今天就来讲讲我最近遇到的vue项目打包部署到服务端的注意事项及步骤。
1我们用vue-cli脚手架建一个项目之后,在本地测试都没有问题,但是直接用npm run build打包,访问基本都是有问题,比如:页面出现空白现象,获取资源路径不对等,我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题,我也遇到过,那现在我们就来一一解决这样的问题。
出现的问题:
打包到服务器后,出现资源引用路径的问题
打包到服务器后,出现空白页的问题
打包到服务器后,出现引入的css的type被拦截转换为"text/plain"问题
打包到服务器后,出现路由刷新404的问题
此时我们需要以下几步
1配置服务端地址
有一个很尴尬的问题就是config/prod.env.js目录中要配置服务端的地址,我在网上搜了很多都没有提到这一步,我只配置了dev.env.js中的地址BASE_API:'"http://192.168.1.144:8081"',之前一直读取的是本地的开发环境,我一直在想从哪里获取呢,后来在prod.env.js配置后发现会打包后会自动读取路径。
这两个文件有什么不同呢?Dev.env.js是本地开发环境中会调用的服务端配置地址,但是prod.env.js是打包时会自动读取里面的服务端地址,先知道了有什么不同,才会了解为什么在这里面配置
2修改config下index.js的配置
修改build:{}中内容,assetsPublicPath: '/ywyun/',// '/' '
首先build是打包时会读取的模块,该这里是打包时会自动加一个文件夹名为ywyun,因为我们打包后悔变成index.html和dist文件夹,这两个东西部署的时候肯定是要放在一个文件夹内,至于这个文件夹文字是什么,根据你们自己的项目名字或者路径来定义。
这个解决的是出现资源引用路径的问题。
3出现由于前面项目加了个基目录,ywyn,访问出现404的问题
今天做的应用发布到服务器上,发现当刷新当前路由的时候,就会出现404的状况,其实这是因为当刷新当前页面时候,所需要访问的资源在服务器上找不到,也就是说,我们在Vue发应用的过程中,设置路由的路径不是真实存在的路径,并且使用了history模式。解决方案是在router/index.js下加一个base路径,因为在部署的时候有一个文件夹,这个文件夹相当于一个基目录,路由没有这一层的话会报错,
export default new Router({
mode: 'history',
base:'/ywyun/',
routes: constantRourerMap
})
4页面刷新时出现404问题
此时访问页面应该基本的都可以跳转,但是刷新的时候突然发现报了404,这个在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释
根据官方给出的解决方案原理
你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
所以在tomcat服务器下你可以这么做。在打包好的项目根目录下新建一个WEB-INF文件夹,在WEB-INF中写一个web.xml。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
这样的目的就是一旦出现404就返回到 index.html 页面。
以上所述是给大家介绍的Vue项目webpack打包部署到Tomcat或者阿里云服务器遇到的一系列问题,基本上这几个点改了,在本地用tomcat试一下,然后可以直接上传到阿里云上部署测试了。
更多专业前端知识,请上 【猿2048】www.mk2048.com