前言

使用vue-cli腳手架構建的vue工程在開發時可以使用

npm run server

愉快地進行開發，遇到後端介面需要跨域訪問時使用devServer.proxy(https://cli.vuejs.org/config/#devserver)完成代理配置即可。

如何將工程打包釋出到生產環境呢？下面將採用Docker+Nginx的方法完成前端專案的釋出，並使用Nginx反向代理完成跨域支援。

增加Dockerfile檔案到專案根目錄

內容如下：

**/node_modules**/dist

設定 .dockerignore 檔案能防止 node_modules 和其他中間構建產物被複制到映象中導致構建問題。

增加Nginx配置檔案檔案到專案根目錄

內容如下：

user  nginx;worker_processes  1;error_log  /var/log/nginx/error.log warn;pid        /var/run/nginx.pid;events {  worker_connections  1024;}http {  include       /etc/nginx/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  /var/log/nginx/access.log  main;  sendfile        on;  keepalive_timeout  65;  server {    listen       80;    server_name  localhost;    location / {      root   /app;      index  index.html;      try_files $uri $uri/ /index.html;    }    # 代理配置，解決跨域問題      location /auth {        proxy_pass http://xxx.xxx.xxx.xxx:90000;    }    error_page   500 502 503 504  /50x.html;    location = /50x.html {      root   /usr/share/nginx/html;    }  }}

編譯映象

開啟終端執行

docker build . -t my-app

執行映象docker run -d -p 8080:80

瀏覽器訪問

http://127.0.0.1/vhost/conf/img_echo.php?w=640&h=368&src=http://localhost:8080/