vue前端項目測試環境部署 & nginx配置

 [ 測試環境服務器目錄 ]

(溫馨提示：配置1，配置2均在 vue.config.js 文件中修改)

 

1. 配置 publicPath

默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，

例如：https://www.histomed.com。

如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑，

例如：如果你的應用被部署在 https://www.histomed.com/admin/，則設置 baseUrl 為 /admin/。

 

 (此處做了環境的區分，其實這里可以直接寫為publicPath:'/pcp/')

 

運行命令 npm run build ，打包后生成 dist 目錄：

此時可以看到，在每一個被引入的文件的路徑前面多了 /pcp/ 

 而這個 /pcp/ 就是我們剛剛在 vue.config.js 文件中配置的 publicPath 屬性，否則找不能正確找到測試環境服務器下的pcp路徑。

 

 

2. 配置 devServer （開發環境轉發解決跨域）

在 VUE CLI3 的根目錄下創建 .env.development 文件或 .env.production 文件后，
可以在全局通過 process.env 找到對應文件下相應的屬性值(如: NODE_ENV , BASE_API等)：

 

 

【關於proxyTable的原理】
同源策略 是瀏覽器需要遵循的標准，而如果是服務器向服務器請求就無需遵循同源策略。

vue-cli3 的 proxyTable 用的是 http-proxy-middleware 中間件，該中間件本質上是在本地開了一個服務器 devServer，所有的請求都通過這里轉發出去，即把瀏覽器的發送請求代理轉發到代理服務器上，再由代理服務器發送請求給目標服務器，從而解決跨域問題。

在build打包之后,就相當於靜態文件,已經跟node沒有關系了 。

 

 假如不配置 devServer, 訪問的是8080端口，發生了跨域，就找不到后台接口:

 

 配置 devServer 后：

 

 

 3. 配置 nginx（生產環境轉發解決跨域）

server {
	listen       80;
	server_name  localhost;

	location /pcp {
		root /alidata/www/test.hengdaomed.com;
		try_files $uri $uri/ /pcp/index.html;
		index  index.html index.htm;
	}

	location /pcp-be {
		 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://localhost:10999/pcp;
	}

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

 nginx 配置完成后運行命令  nginx -s reload  重啟 nginx。

【關於 nginx 路徑配置】

 

 

 

[ vue.config.js ]:

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title || '遠程會診管理系統' // 標題

const port = process.env.port || process.env.npm_config_port || 80 // 端口

// vue.config.js 配置說明
//官方vue.config.js 參考文檔 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 這里只列一部分，具體配置參考文檔
module.exports = {
  // 部署生產環境和開發環境下的URL。
  // 默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上
  // 例如 https://www.histomed.com。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.histomed.com/admin/，則設置 baseUrl 為 /admin/。
  publicPath: process.env.NODE_ENV === "production" ? "/pcp/" : "/pcp/",
  // 在npm run build 或 yarn build 時 ，生成文件的目錄名稱（要和baseUrl的生產環境路徑一致）（默認dist）
  outputDir: 'dist',
  // 用於放置生成的靜態資源 (js、css、img、fonts) 的；（項目打包之后，靜態資源會放在這個文件夾下）
  assetsDir: 'static',
  // 是否開啟eslint保存檢測，有效值：ture | false | 'error'
  lintOnSave: process.env.NODE_ENV === 'development',
  // 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。
  productionSourceMap: false,
  // webpack-dev-server 相關配置
  devServer: {
    host: '0.0.0.0',
    port: port,
    proxy: {
      '/dev-api' : {
        target: `http://localhost:10999/pcp`,
        changeOrigin: true,
        pathRewrite: {
          '^/dev-api': ''
        }
      }
    },
    disableHostCheck: true
  },
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}