记一次vue项目部署环境搭建

最新推荐文章于 2024-03-14 18:22:24 发布

原创最新推荐文章于 2024-03-14 18:22:24 发布 · 821 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue项目发布 #vue项目跨域问题 #vue项目刷新当前页面404

Vue.js 专栏收录该内容

7 篇文章

订阅专栏

本文详述了在Linux环境下将Vue项目部署至Tomcat的全过程，包括下载及配置Tomcat，打包并上传Vue项目，修改端口，解决404问题，以及跨域配置。

1.下载linux环境下的tomcat

下载linux环境下的tomcat版本，我这里下载的是tomcat8.0

附上官网地址：https://tomcat.apache.org/download-80.cgi

2.将下载的tomcat上传到服务器的指定目录并解压

上传命令：rz -bye

解压到当前目录下的命令：tar xf apache-tomcat-8.5.38.tar.gz

3.将vue项目打包并压缩dist目录下的文件以及文件夹

先将vue项目的配置改成线上的，然后再打包，打包命令：npm run build

打包后dist文件夹下会出现一个index.html文件以及static文件夹，然后将static文件夹压缩为static.zip

4.将压缩后的文件上传至 tomcat/webapps/ROOT/ 目录下，并解压

将index.html以及static.zip上传到apache-tomcat-8.5.38/webapps/ROOT/目录下

然后将static.zip解压，解压命令：unzip static.zip

解压后static.zip压缩包可删除，删除命令：rm -rf static.zip

5.tomcat的默认端口为80端口，如果需要修改则去修改配置文件

配置文件路径：apache-tomcat-8.5.38/conf/server.xml

将如下图位置的port改成自己想要的端口，这里是改成了8080

附在服务器上修改配置文件的方法：

vim server.xml
按i进入insert模式
移动光标修改想要修改的内容
按esc再输入英文的:wq即为保存成功

6.启动tomcat

进入到apache-tomcat-8.5.38/bin/目录下，启动命令：sh startup.sh

关闭的命令：sh shutdown.sh

7.项目部署完毕之后能够正常访问，但是刷新当前页面则会报404

在vue项目中如果在路由中使用了history模式，那么，当我们 npm run build 完成并部署到服务器后，刷新某个路由下的页面，会出现 404 或者 502 错误。这是因为刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。

附上tomcat中的解决方法：在与dist同级的目录下创建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>Welcome to Tomcat</display-name>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
  <description>
     Welcome to Tomcat
  </description>
</web-app>

如果使用nginx以及其他方法的请看官网解决文档：https://router.vuejs.org/zh/guide/essentials/history-mode.html

8.请求接口跨域以及访问服务器静态资源跨域

接口请求跨域需要在后台配置，只需要在请求头上面加上跨域的配置就可以了，代码如下：

@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    logger.info("doFilter...");
    HttpServletResponse rsp = (HttpServletResponse) servletResponse;
    rsp.setHeader("Access-Control-Allow-Origin", "*");
    rsp.setHeader("Access-Control-Allow-Headers", "Content-Type,token,X-Requested-With");
    rsp.setHeader("Access-Control-Allow-Credentials", "true");
    rsp.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    rsp.setHeader("X-Powered-By", " 3.2.1");
    rsp.setHeader("Content-Type", "application/json;charset=utf-8");
    filterChain.doFilter(servletRequest, servletResponse);
}

详细代码请移步：https://github.com/chenqim/Springboot-Mybatis/blob/master/src/main/java/com/summer/filter/CrossOriginFilter.java

如果是直接请求服务器上面资源跨域了则需要加一个nginx，在nginx的配置文件上面加一个跨域的请求头即可。