阿里云————部署springboot与vue项目的艰辛过程

现在的项目都流行 前后端完全分离的模式。所以我这边也 尝试了一把，但是真正跑起来真的好困难，做个记录，给自己也给别人一点 提醒；

前台使用的是 vue+element

后台使用的是springboot

jar包管理是 maven

数据库是mysql

开发工具，前台：HbuilderX;后台Idea

Idea 创建好了springboot项目，然后使用maven打包成jar

idea打开 终端Terminal输入 mvn clean package 打包命令

打包的过程中出现了很多 问题，每次打包的时候提示 编译时，GBK编码转换 问题，解决方式：打开pom.xml文件 ，在编译时添加 <encoding>utf8</encoding>

<plugin>
  <artifactId>maven-compiler-plugin</artifactId>
     <configuration>
     <source>1.8</source>
     <target>1.8</target>
     <encoding>utf8</encoding>
  </configuration>
</plugin>

打包成jar包的pom.xml的写法，这里必须有 <goal>repackage</goal>来告诉 jar包程序的入口是哪里，要不然打包以后运行程序会报错，没有主程序清单

       <plugin>
		   <groupId>org.springframework.boot</groupId>
		   <artifactId>spring-boot-maven-plugin</artifactId>
		   <executions>
			   <execution>
				   <goals>
					   <goal>repackage</goal>
				   </goals>
			   </execution>
		   </executions>
       </plugin>

 打成jar包以后在linux环境下下运行

nohup java -jar XXX.jar，启动spring后台程序

这里为止，后台就算在服务器跑起来了，下面开始搞前端

打开终端，输入 npm run build便宜命令，奇怪的是，明明可以正常运行的项目，打包的时候居然一直报错，首先报错

显示一大堆类似下面的错误

ERROR in index.js?acbd3e160e93c0931b1b from UglifyJs
Unexpected token: punc (() [./~/vue-particles/src/vue-particles/index.js:6,0][index.js?acbd3e160e93c0931b1b:3195,12]

网上查了一大堆资料，总体意思是说ES6的语法,ES5识别不了，最后在项目目录下添加了一个.babelrc文件，解决了大多数报错，文件中的内容如下：

{
  "presets": [

    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "env": {

    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

最后一个问题也就是 如下这个问题，

ERROR in index.js?acbd3e160e93c0931b1b from UglifyJs
Unexpected token: punc (() [./~/vue-particles/src/vue-particles/index.js:6,0][index.js?acbd3e160e93c0931b1b:3195,12]

我打开了这个路径的这个文件，然后发现里面的代码是这样的

const VueParticles = {

    install(Vue, options) {
        Vue.component('vue-particles', particles)
    }

}

现在打包的时候不支持 这个(){}这种函数写法，所以改写成如下

const VueParticles = {

    install:function(Vue, options) {
        Vue.component('vue-particles', particles)
    }

}

重新打包，发现没有错误，打包成功以后在项目路径下面有一个 dist文件夹

接下来就是部署前端了，综合查询以后，感觉nginx比较好，小巧方便；

下载 nginx以后，在windows下面解压后直接运行 nginx.exe，访问localhost:80以后就能到欢迎页面，dist文件夹中的所有文件复制放入 nginx的html文件夹下面，访问以后发现能访问首页，但是不能与后端通信，这里还有一个很严重的 跨域问题没有解决，需要配置一下 nginx目录下conf下面的nginx.conf这个文件，在这段代码

 server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        location / {
            root   html;
			index  index.html index.htm;
        }

后面加上

location /api {
			if ($request_method = 'OPTIONS') { 
				add_header 'Access-Control-Allow-Origin' '*';
				add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
				add_header 'Access-Control-Max-Age' 1728000;
				add_header 'Content-Type' 'text/plain charset=UTF-8';
				add_header 'Content-Length' 0;
				return 204;
			}
			if ($request_method = 'POST') {
				add_header 'Access-Control-Allow-Origin' *; 
				add_header 'Access-Control-Allow-Credentials' 'true'; 
				add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
				add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
			}
			if ($request_method = 'GET') {
				add_header 'Access-Control-Allow-Origin' *; 
				add_header 'Access-Control-Allow-Credentials' 'true'; 
				add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
				add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
			}
			# 匹配apis之后的路径和参数
			rewrite  ^.+apis/?(.*)$ /$1 break;
			include  uwsgi_params;
			# 实际调用的API
			proxy_pass http://localhost:9999;
        }

/api  是因为我所有的前端访问都有一个前缀 /api，比如 /api/user/login     /api/user/list等等，所以这里相当于所有路径匹配到/api的url做个转换，去访问  http://localhost:9999;这个路径；也就是 proxy_pass后面的值，重新启动，成功访问好后端。