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

1.下载linux环境下的tomcat

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

记一次vue项目部署环境搭建_第1张图片

附上官网地址: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

记一次vue项目部署环境搭建_第2张图片

 

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

记一次vue项目部署环境搭建_第3张图片

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

  1. vim server.xml
  2. 按i进入insert模式
  3. 移动光标修改想要修改的内容
  4. 按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,文件中的内容如下:



  Welcome to Tomcat
  
    404
    /index.html
  
  
     Welcome to Tomcat
  

如果使用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的配置文件上面加一个跨域的请求头即可。

记一次vue项目部署环境搭建_第4张图片

你可能感兴趣的:(Vue.js)