ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

springboot+vue本地部署

2022-06-30 01:00:07  阅读:100  来源: 互联网

标签:index vue http springboot server html proxy 本地 log


springboot+vue本地部署

最近完成项目,需要部署到本地,期间遇到了一些问题,最后写下流程以作记录。

springboot打包

这块的内容较为简单一般为在pom.xml中加入

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-surefire-plugin</artifactId>
            <version>2.22.2</version>
            <configuration>
                <skipTests>true</skipTests>
            </configuration>
        </plugin>
    </plugins>
</build>

让项目在打包时,后续出现"xx.jar中没有主清单属性的解决办法"。

之后直接点击图中的package就可完成后端打包

此时就可在对应的文件夹中看到生成的包

然后只需要在目录栏中输入cmd,命令提示符进入对应的目录,

java -jar xxx.jar (可打出第一个字母tab补全)

至此后端项目就完成了

前端vue部署

首先在项目根目录下创建vue.config.js文件

  publicPath: './', // 部署应用包时的基本 url
  outputDir: 'dist', // build 构建文件目录
  assetsDir: 'static', // 静态资源目录
  lintOnSave: process.env.NODE_ENV === 'development', // 仅在开发模式下进行 eslint 检测代码
  productionSourceMap: false, // 禁用生产环境的 source map
  runtimeCompiler: true, // 是否运行时组件中使用 template
  devServer: {
    host: '0.0.0.0', // 默认是 localhost,可不配置
    port: 8000, // 配置端口号
    open: true, // 启动是否打开浏览器
    overlay: { // 是否在浏览器上显示编译的 errors 或 warnings
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': { // 被代理的接口名
        target: 'http://localhost:8080', // url地址
        changeOrigin: true, // 发送请求头中 host 是否设置成 target
        pathRewrite: { // 重定向
          '^/api': ''
        }
      }
    }
  },
  • 查看路由中(router/index.js)是否使用history,是的话修改为hash。或者将mode直接注掉,因为默认使用hash

查看路由中(router/index.js)是否使用history,是的话修改为hash。或者将mode直接注掉,因为默认使用hash。

然后再次使用npm run build进行打包就会出现dist文件夹,已经其中静态文件会放置到static中。

到此打包已经结束。

部署nginx

  • 首先安装nignx,具体可搜博客

  • 然后将dish中的内容复制到nginx目录下的html文件夹下

  • 最后更改nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


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

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8001;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root "E:\ideaworkplace\AVIC\AVICTest\vue-admin\dist";
        location / {
            #root   html;
            #index  index.html index.htm;
              try_files $uri  /index.html;
        }
          location ^~ /api/ {     
                proxy_pass http://localhost:8080/;  #后端服务真实地址
        }
#        location /api {
#                proxy_pass http://localhost:8080;
#	proxy_http_version 1.1;
#	proxy_set_header Upgrade $http_upgrade;
#	proxy_set_header Connection 'upgrade';
#	proxy_set-header Host $host;
#	proxy_cache_bypass $http_update;

#        }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

  • 然后直接循行Nginx.exe ,或者start nginx都可,屏幕会闪烁以下,表示运行成功
  • 然后就能访问

小结:由于是第一次部署前后端分离项目,期间遇到很多问题,一般解决思路通过程序和打完的包互相访问(4种)试出哪个有问题,然后对应的解决。

标签:index,vue,http,springboot,server,html,proxy,本地,log
来源: https://www.cnblogs.com/zhouqingyi/p/16425437.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有