springboot+vue本地部署

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种）试出哪个有问题，然后对应的解决。