vue项目部署方式:tomcat部署和nginx部署

关于vue部署

1.nginx转发

一般项目前后端分离得话,都会用nginx作为反向代理转发的。
因为项目要兼容ie9,使用axios发ajax请求的时候,不能通过CORS解决跨域的问题,所以尝试部署nginx作反向代理.

参考:vue+webpack+vue-router(history) 部署到nginx服务器下,非根目录,前后端怎样配置文件?
nginx配置proxy_pass
Nginx反向代理解决前后端联调跨域问题

1.1vue打包

其中vue+webpack+vue-router(history) 部署到nginx服务器下,非根目录,前后端怎样配置文件这篇文章详细说明了怎么打包vue项目,记得修改config下的index.js文件.
修改为:(只显示修改的部分)

  build: {
    // Template for index.html
    index: path.resolve(__dirname, "../dist/index.html"),

    // Paths
    assetsRoot: path.resolve(__dirname, "../dist/myweb"),
    assetsSubDirectory: "static",
    assetsPublicPath: "/myweb/", //和router对应的base配置一致
文件目录结构

1.2nginx反向配置

关于nginx的配置,一定需要注意第二篇文章说到的问题;

1、location /test/ { 
                proxy_pass http://t6:8300; 
     } 

2、location /test/ { 
                proxy_pass http://t6:8300/; 
     } 

proxy_pass转发的路径后是否带 “/” 的意义都是不一样的,假设有请求http://true_server/test/index.html,如果配置是第一种情况,不带"/"的话,那么访问的实际是
http://t6:8300/index.html,直接访问根路径,如果带"/",那么访问的实际是"http://t6:8300/test/index.html",以"/test"作为根路径.
具体配置如下:

#user  nobody;
worker_processes  1;
error_log  logs/error.log  notice;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    #include blocksip.conf;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

   server {
        listen       8999;
        server_name  localhost;
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        root html;
        }
         location / {
            root E:/_ex_workplace/pweb/dist;
           try_files $uri $uri/ /index.html;
            index index.html index.htm;
        }

         location /api/ {
            rewrite ^/api/(.*)$ /$1 break;  #所有对后端的请求加一个api前缀方便区分,真正访问的时候移除这个前缀
            # API Server
            proxy_pass http://132.122.14.6:9800/;  #将真正的请求代理到serverB,即真实的服务器地址,ajax的url为/api/user/1的请求将会访问http://www.serverB.com/user/1
        }
        
        location @router {
            rewrite ^.*$ /index.html last;
        }
    }
}

2.部署到tomcat下

2.1vue项目的路由配置

因为项目上线,一般需要添加项目名,并且消去vue-router产生的#号,需要在router的配置下,在本项目是router->index.js下配置:

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);

export default new Router({
  base: "/webSite/", //项目名称 访问路由页面都需要加上这个,访问的根路径为http://ip:port/webSite
  mode: "history", //消去#
  routes: [
    {
      path: "/test",
      name: "test",
      component: resolve => require(["@/pages/test"], resolve)
    }]
})

2.2vue项目的静态资源配置

在打包后,会生成dist文件,文件下由以下部分组成:

打包后dist目录

如果打开static里面的css会发现由如下文件:
css文件

这些css都是webpack打包生成的,并且上面提到的index.html文件会引用这些文件。
如果不修改config下的index文件,打包生成的index.html对这些文件引用被打包为:
<script type=text/javascript src=/static/js/vendor.0ee9deae193305689fa2.js> </script>
显然这是不合理的,因为我们已经配置了根路径为http://ip:port/webSite,所以我们需要修改config下的index.js文件的内容:
找到index.js文件,找到build对象:
修改为assetsPublicPath的值为与上面的base的取值一致。

build: {
    // Template for index.html
    index: path.resolve(__dirname, "../dist/index.html"),

    // Paths
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "static",
    assetsPublicPath: "/webSite/",

    productionSourceMap: true,
    devtool: "#source-map",

    productionGzip: false,
    productionGzipExtensions: ["js", "css"],
    bundleAnalyzerReport: process.env.npm_config_report
  }
config

2.3vue项目配置完毕

至此,整个vue项目算是配置完毕,但是部署到tomcat下会出现访问图片没有带根路径的问题,如果你引用图片的方式和我一致,如下:

        <img :src="'../../static/images/'+code+'.png'" alt="icon">

那么可以尝试的解决方法是,重新配置tomcat的;

2.4tomcat的配置

首先在tomcat的webapps新建文件夹,文件夹名称和上面配置的根路径一致,即为webSite,然后将打包生成的dist文件夹里面的文件复制到webSite下,并且新建文件 WEB-INF/web.xml:
项目结构为:


项目结构

2.5配置静态资源服务

2.5.5.1修改server.xml文件

找到tomcat的conf文件下的server.xml,配置静态服务,找到HOST标签:
这里的配置为:

      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

        <!-- SingleSignOn valve, share authentication between web applications
             Documentation at: /docs/config/valve.html -->
        <!--
        <Valve className="org.apache.catalina.authenticator.SingleSignOn" />
        -->

        <!-- Access log processes all example.
             Documentation at: /docs/config/valve.html
             Note: The pattern used is equivalent to using pattern="common" -->
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log" suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />
               <Context path="" docBase="webSite" reloadable="false" />
      </Host>

参考:tomcat配置静态服务

2.5.5.2修改新增的web.xml文件

增加这个文件是因为,解除#号,参考官网:
去除vue项目的#号
这里就直接丢配置了:

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0"
  metadata-complete="true">

  <display-name>webapp</display-name>
  <description>
     webapp
  </description>
  <error-page>  
   <error-code>404</error-code>  
   <location>/index.html</location>  
</error-page>  
</web-app>

推荐阅读更多精彩内容

  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 41,934评论 6 343
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 124,666评论 18 136
  • hello.py文件内容: #!/usr/bin/env python #coding:utf-8 import ...
    江魁阅读 1,032评论 0 0
  • 约写发回装裱图。
    逸之何春雷阅读 349评论 4 29
  • 喜欢孤独! 自觉是个宜静宜动的人,可不知为何偏爱孤独!年龄的增长让岁月带来了愈来愈多的历史积淀,孤独感也愈来愈甚!...
    云梦飞阅读 121评论 3 5
  • 当你死去,来到炼狱,需要经历你生前给他人造成的所有痛苦,成功则前往天堂,失败则下地狱。而你是一名牙医。 水泥路靠的...
    River_bcec阅读 652评论 0 0