服務器部署結構

1、服務器訪問直接訪問NGINX
2、靜態資源訪問， nginx讀取本地文件夾
3、API接口路由， nginx把以api開頭的訪問都路由到業務邏輯服務器。

nginx配置

   server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        # 靜態資源位置 (這裏的dist文件夾，即vue打包的默認文件名）
        location / {
            root   c:/nginx/dist;
            index  index.html index.htm;
        }

        # 業務邏輯路由到真實服務器
    location /api {
            proxy_pass http://192.168.0.161:40001;
        }
      # .....
  } 
 

Vue資源打包

axios 跨域訪問問題

跨域問題分兩種情況， 分別是開發者模式與生產環境跨域訪問。

所謂開發者模式是指， 直接用npm run dev 運行vue程序， 包含了各種調試信息。

生產者環境是指， 通過npm run build把vue項目程序進行打包， 生成一個幹凈的發布內容。

1、在進行跨域訪問時， 我們用axios進行訪問服務器如下

this.$axios.post(process.env.API_HOST + '/api/app/download', {id : id}).then((result) => {
    console.log(result)
}).catch((err) => {
    console.log(err);
});
 

這裏POST的路徑為process.env.API_HOST + ‘/api/app/download‘的絕對路徑。

2、在開發者模型式下的配置

在config/dev.env.js文件中，添加如下內容

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST:'""'
})

在config/index.js文件中，添加路由表proxyTable

module.exports = {
  dev: {
    // .....這裏省略
    proxyTable: {
      '/api': {
        target: "http://localhost:40001",  // 這裏需要訪問的跨域服務器地址
        changeOrigin: true      
      }
    },
   //....這裏省略
   }
}
 

這樣開者模式下的配置就完成了

3、生產環境下的配置

在config/prod.env.js文件中，添加如下內容

module.exports = {
  NODE_ENV: '"production"',
  API_HOST:' "http://localhost" '
}

API_HOST就是指定需要跨域訪問的服務器。

然後，在config/index.js文件中， 添加和編輯打包配置信息, 找到build字段，添加如下內容

  build: {
    env: require('./prod.env'),
    assetsPublicPath: './',
    productionSourceMap: false,
    ...
  }

這樣就可以使用npm run build進行打包vue項目。默認輸出到../dist這個位置。 前面的nginx靜態資就是這個文件夾內容。

Spring Cloud打包

1、打包 jar文件包

在pom.xml文件中，指定打包類型, 即添加jar

    <groupId>com.example</groupId>
    <artifactId>svc-gateway</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

執行命令mvn build打包, 生產包，如上配置生成svc-gateway-0.0.1-SNAPSHOT.jar

2、運行程序

java -jar svc-gateway-0.0.1-SNAPSHOT.jar --server.port=40001

總結

訪問請來了， 如果是http://localhost/api/xxxxx，就會被nginx路由到配置poxyPass對應的位置；否則會直接指定的location下面打找文件。

發布spring cloud + vue項目