将前端vue项目部署到nginx中，vue中publicPath自动拼接一个路径

小麟有点小靈

已于 2023-03-01 19:33:50 修改

阅读量4.1k

点赞数 9

分类专栏：前端文章标签： vue.js 前端 nginx tomcat

于 2022-08-22 16:43:35 首次发布

本文链接：https://blog.csdn.net/cjy1575944940/article/details/126466698

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

今天领导让把前端的vue项目部署到nginx中，原来是部署在tomcat里的，
tomcat的

和别的项目不同的是，这边vue.config.js里引入了一个publicPath，这个作用有什么影响呢？后面会讲到
vue项目的位置 /opt/AppData/ipas-client
请添加图片描述

一、原来tomcat的配置

这边是是tomcat里的server.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<Server port="7051" shutdown="SHUTDOWN">
  <Listener className="org.apache.catalina.startup.VersionLoggerListener" />
  <Listener className="org.apache.catalina.core.AprLifecycleListener" SSLEngine="on" />
  <Listener className="org.apache.catalina.core.JreMemoryLeakPreventionListener" />
  <Listener className="org.apache.catalina.mbeans.GlobalResourcesLifecycleListener" />
  <Listener className="org.apache.catalina.core.ThreadLocalLeakPreventionListener" />
  <GlobalNamingResources>
    <Resource name="UserDatabase" auth="Container"
              type="org.apache.catalina.UserDatabase"
              description="User database that can be updated and saved"
              factory="org.apache.catalina.users.MemoryUserDatabaseFactory"
              pathname="conf/tomcat-users.xml" />
  </GlobalNamingResources>

  <Service name="Catalina">
    <Connector port="7040" protocol="HTTP/1.1"
	    maxHttpHeaderSize="81920" useBodyEncodingForURI="true"
        maxThreads="2000" redirectPort="8443"  enableLookups="false"
        compression="on" compressionMinSize="2048" URIEncoding="utf-8" EncodingForURI="true"
        compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain"
        connectionTimeout="300000" disableUploadTimeout="true"/>

	<!--
    <Connector port="7041" protocol="AJP/1.3" redirectPort="8443" />
	-->
    <Engine name="Catalina" defaultHost="localhost" jvmRoute="jvm1">
      <Realm className="org.apache.catalina.realm.LockOutRealm">

        <Realm className="org.apache.catalina.realm.UserDatabaseRealm"
               resourceName="UserDatabase"/>
      </Realm>



       <Host name="localhost" debug="0"
       unpackWARs="true" autoDeploy="true" xmlValidation="false" xmlNamespaceAware="false">
       <!-- 后端java代码以及访问地址  -->
       <Context path="server" docBase="/opt/AppData/ipas" debug="0"  reloadable="false" >
       	
	 
</Context>
	<!-- 前端vue代码以及访问位置  -->
	<Context path="/bms" docBase="/opt/AppData/ipas-client"  reloadable="false" />
       </Host>

    </Engine>
  </Service>
</Server>

注意注释里前端和后端那里，实现的效果为
输入：http://远程地址服务器:7040/server 访问的为java后台
输入：http://远程地址服务器:7040/bms 访问的为vue项目

这里是vue项目里的vue.config.js，此处的publicPath要和访问地址一样，例如地址栏输入：地址/bms跳入后台（得和tomcat里的前端代码注释部分，以及nginx访问前端路径的地址写的一样，都要为“/bms”。）具体可以看vue官网的解释publicPath，

module.exports = {
  publicPath: '/bms',
	... 
}

同时需要改router/index.js里的代码，吧base：加上项目默认路径

const router = new VueRouter({
  base: '/bms',
  // base: '/', // 这里改成/
  routes: routes
});

二、改造成部署在nginx中

这里选择端口号18085
选择端口号前，需要先用命令查找是否有程序占用端口号18085

netstat -nlp|grep :18085

本来是想做成nginx的请求为：http://服务器地址:18085/
没有东西输出那就是代码没有程序占用了，自己可以用

然后就可以直接访问，不改vue.config.js里的publicPath配置
于是就找到nginx/conf/nginx.conf，改成如下模样
注意，这次的没有出现想要的效果

server 
    {

        listen       18085;
        server_name  localhost;
		
		# 用于处理publicPath会自动将css，js，添加一段/bms路径
		location ^~ /bms/ {
                alias   /opt/AppData/ipas-client;
        }
		
		# 想输入端口号18085/即可访问
        location / {
        		# vue代码的位置
                root   /opt/AppData/ipas-client; 
                index  index.html index.htm;
        }


     #   /opt/AppData/tdc-web-client/js/lingengfa_group.f689a495.js

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
                root   html;
        }
    }

发现还是整不出来，那个正则没有生效，这里不知道是哪里错了，
于是就统一整成 http://服务器地址:18085/bms，这是必要的
另外可选加上 http://服务器地址:18085/访问，这个可以不是必要的
才进行访问的形式，此时publicPath才能被检测到

    server 
    {

        listen       18085;
        server_name  localhost;

        
       # 必要的
       location /bms {
                alias   /opt/AppData/ipas-client;
                index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
                root   html;
        }
    }

其中的为啥用alias而不用root
是因为如下原因

#地址栏输入 http://服务器地址:18085/bms
# 寻找的文件位置为/opt/AppData/ipas-client
# 这是对的
location /bms {
        alias   /opt/AppData/ipas-client;
        index  index.html index.htm;
}

# 地址栏输入 http://服务器地址:18085/bms
# 寻找的文件位置为/opt/AppData/ipas-client/bms
# 这就不对了
location /bms {
        root   /opt/AppData/ipas-client;
        index  index.html index.htm;
}

保存好nginx.conf后
然后命令行进入到nginx/sbin文件夹下
输入./nginx -s reload重新读取配置文件
或者输入./nginx -s stop关掉nginx，然后输入./nginx 启动nginx
效果如下
请添加图片描述
路径去掉/bms，也可以访问

至于有没有什么办法限制不输入bms，仅仅能输入/就直接进入的，欢迎各位大神来改那段nginx配置

三、去掉路径，仅通过域名访问

把nginx配置文件改成，“location /”部分如下，只加入location

    server 
    {

        listen       18085;
        server_name  localhost;

        
      
        # 输入/访问
         location / {
            root   /opt/AppData/ipas-bms; # 路径改成自己的dist路径
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        # error_page   500 502 503 504  /50x.html;
        # location = /50x.html {
        #        root   html;
        # }
    }

然后将vue.config.js里的开头修改成

//旧
module.exports = {
  publicPath: '/bms',
 ...
 }

// 新
module.exports = {
  publicPath: '/',
 ...
 }

同时需要改router/index.js里的代码

const router = new VueRouter({
  // base: '/bms',
  base: '/', // 这里改成/
  routes: routes
});

访问成功
请添加图片描述

特殊情况vue代理不生效

今天遇到一个特殊的情况，vue的代理配置没有生效
位置：vite.config.js

// vite 相关配置
    server: {
      port: env.VITE_APP_PORT,
      host: true,
      open: false,
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        '/prod-api': {
          target: 'http://服务器的地址:7045',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/prod-api/, '')
        }
      }
    },

但是进去后发现报404了
经过调试发现需要在nginx上加上这段配置

upstream ipasnew{
	server localhost:7045;
}
server 
{

	listen       18086;
	server_name  localhost;

	location / {
			root   /opt/AppData/ipas-new-server/bms;
			try_files $uri $uri/ /index.html;
			index  index.html index.htm;
	}

	# 加上这段
	location /prod-api/ {
		proxy_set_header Host $http_host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header REMOTE-HOST $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass http://ipasnew/;
	}

	# error_page   500 502 503 504  /50x.html;
	# location = /50x.html {
	#        root   html;
	# }
}

规范

之前有一次部署被骂了，原因就是因为不符合规范，而且部署的确实有问题，正确格式应该如下


    upstream mynew{
        server localhost:7055;
    }
    upstream mynewxxl{
        server localhost:9600;
    }
    server {
        listen 80;
        listen 443 ssl;
        server_name xxx.xxx.com; 
        root /opt/AppData/mynew/bms-18085;
        index index.html index.htm;
		charset  utf-8;
        ssl_certificate /opt/nginx/cert/xxx.pem; #（证书公钥）
        ssl_certificate_key /opt/nginx/cert/xxx.key; #（证书私钥）
        ssl_session_timeout 5m; 
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
        ssl_ciphers AESGCM:ALL:!DH:!EXPORT:!RC4:+HIGH:!MEDIUM:!LOW:!aNULL:!eNULL:!3DEC;
        ssl_prefer_server_ciphers on;

        if ($scheme = http) {
             return 301 https://$host$request_uri;
         }
        
        location / {
            root   /opt/AppData/mynew-new/bms-18085;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
			# add_header  Cache-Control  no-cache;
         }
               
		# 定时任务服务
		location /xxl-job-admin/ {
			proxy_set_header Host $http_host;
			proxy_pass http://mynewxxl;
		}

    
        # 请求java服务
        location /prod-api/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://mynew/;	# 一开始读的地方
        }

    }

原因是因为nginx是由下往上读的，比如一开始读的最下面那里，匹配的是upstream mynew那边。如不按照规范写配置有可能会造成部署失败

小麟有点小靈

关注

9
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
将前端vue项目部署到nginx中，vue中publicPath自动拼接一个路径

将原本部署在tomcat中的vue项目改成部署在nginx中。强调了vue.config.js里的publicPath对nginx配置的影响，修改访问路径后vue配置以及nginx配置都需要修改
复制链接

扫一扫