vue打包部署到tomcat

每个月一次的技术文档是一个总结的过程，今天就来讲讲我最近遇到的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