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

LINUX 发布 VUE项目


关于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的配置,一定需要注意第二篇文章说到的问题;

shell
location /test/ { 
                proxy_pass http://t6:8300; 
     } 
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
  }

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>
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值