注：

• 本文選擇了nginx做web伺服器。
  
• 因為在本文vue前端專案中，需要從介面獲取資料，可是資料與vue前端專案是在同一ip地址但不同埠號，所以需要跨域讀取資料。本文的跨域處理是使用了nginx。

環境：

• 阿里雲伺服器（ubuntu 64bit）
  
• xshell
• nginx
  

1.使用xshell登入到阿里雲伺服器。安裝nginx（本文安裝到/etc下）

[plain] view plain copy print?

1. cd /etc  
2. apt-get update  
3. apt-get install nginx  

cd /etc
apt-get update
apt-get install nginx

2.首先先配置nginx，然後再根據配置檔案做下一步操作

開啟/etc/nginx/nginx.conf檔案

[plain] view plain copy print?

1. vim /etc/nginx/nginx.conf  

vim /etc/nginx/nginx.conf

在nginx.conf中配置如下： [plain] view plain copy print?

1. user www-data;  
2. worker_processes auto;  
3. pid /run/nginx.pid;  
4. events {  
5.         worker_connections 768;  
6.         # multi_accept on;  
7. }  
8. http {  
9.         ##  
10.         # Basic Settings  
11.         ##  
12.         tcp_nodelay on;  
13.         keepalive_timeout 65;  
14.         types_hash_max_size 2048;  
15.         # server_tokens off;  
16.         # server_names_hash_bucket_size 64;  
17.         # server_name_in_redirect off;  
18.         include /etc/nginx/mime.types;  
19.         default_type application/octet-stream;  
20.         ##  
21.         # SSL Settings  
22.         ##  
23.         ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE  
24.         ssl_prefer_server_ciphers on;  
25.         ##  
26.         # Logging Settings  
27.         ##  
28.         access_log /var/log/nginx/access.log;  
29.         error_log /var/log/nginx/error.log;  
30.         ##  
31.         # Gzip Settings  
32.         ##  
33.         gzip on;  
34.         gzip_disable “msie6”;  
35.         # gzip_vary on;  
36.         # gzip_proxied any;  
37.         # gzip_comp_level 6;  
38.         # gzip_buffers 16 8k;  
39.         # gzip_http_version 1.1;  
40.         ##  
41.         # Virtual Host Configs  
42.         ##  
43.         gzip on;  
44.         gzip_disable “msie6”;  
45.         # gzip_vary on;  
46.         # gzip_proxied any;  
47.         # gzip_comp_level 6;  
48.         # gzip_buffers 16 8k;  
49.         # gzip_http_version 1.1;  
50.         # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;  
51.         ##  
52.         # Virtual Host Configs  
53.         ##  
54.         include /etc/nginx/conf.d/*.conf;  
55.         include /etc/nginx/sites-enabled/*;  
56.         #以下為我們新增的內容  
57.        server {               
58.               listen 80;  
59.               server_name your-ipaddress;  
60.               root /home/my-project/;  
61.               index index.html;  
62.               location /datas {  
63.               rewrite ^.+datas/?(.*) /$\text{\ /}$1 break;  
64.               include uwsgi_params;  
65.               proxy_pass http://ip:port;  
66.                               }  
67.              }  
68. }  

user www-data;
worker_processes auto;
pid /run/nginx.pid;
events {
        worker_connections 768;
        # multi_accept on;
}
http {

        ##
        # Basic Settings
        ##

        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # SSL Settings
        ##

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;
        gzip_disable "msie6";

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;

        ##
        # Virtual Host Configs
        ##


        gzip on;
        gzip_disable "msie6";

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        ##
        # Virtual Host Configs
        ##

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
        #以下為我們新增的內容
       server {             
              listen 80;
              server_name your-ipaddress;

              root /home/my-project/;
              index index.html;
              location /datas {
              rewrite ^.+datas/?(.*)$ /$1 break;
              include uwsgi_params;
              proxy_pass http://ip:port;
                              }
             }
}

接下來就根據配置檔案進行下一步工作。配置檔案中的server_name後面是阿里雲伺服器的ip地址

3.配置檔案中的listen是nginx監聽的埠號，所以需要在阿里雲伺服器上為80埠新增安全組規則

在本地的瀏覽器登入阿里雲伺服器->進入控制檯->點選安全組->點選配置規則->點選新增安全組規則，之後配置如下（注：入方向和出方向都要配置）

4.配置檔案中的root和index那兩行表示我們把專案資料夾放在/home/my-project下

例如有兩個專案資料夾分別為test1，test2，裡面都有index.html。則目錄結構如下

/home

       |–my-project

              |–test1

                      |–index.html

              |–test2

                      |–index.html

則在瀏覽器輸入http://ip/test1/index.html

伺服器便會在/home/my-project中找到test1下的index.html執行；

如果在瀏覽器中輸入http://ip/test2/index.html

伺服器便會在/home/my-project中找到test2下的index.html執行；

這樣便可以在伺服器下放多個專案資料夾。

5.所以我們也需要在本地專案的config/index.js裡的build下進行修改,如果要把專案放到test1下，則

[javascript] view plain copy print?

1. assetsPublicPath: ‘/test1/’,  

assetsPublicPath: '/test1/',

如果用到了vue-router，則修改/router/index.js [javascript] view plain copy print?

1. exportdefaultnew Router({  
2.   base: ’/test1/’,   //新增這行
3.   linkActiveClass: ’active’,  
4.   routes  
5. });  

export default new Router({
  base: '/test1/',   //新增這行
  linkActiveClass: 'active',
  routes
});

6.nginx配置檔案中的location則是針對跨域處理，表示把對/datas的請求轉發給http://ip:port,本文中這個http://ip:port下就是需要的資料，例如http://ip:port/seller,在本地專案檔案中ajax請求資料的地方如下 [javascript] view plain copy print?

1. const url = ‘/datas/seller’;  
2. this.$http.get(url).then((response) => {  
3.   …..  
4. });  

      const url = '/datas/seller';
      this.$http.get(url).then((response) => {
        .....
      });

7.修改後在本地命令列下執行:cnpm run build 生成dist檔案。把dist檔案裡的index.html和static檔案上傳到伺服器的/home/my-project/test1下，目錄結構如下

/home

       |–my-project

              |–test1

                      |–index.html

                      |–static

8.啟動nginx

[plain] view plain copy print?

1. service nginx start  

service nginx start

9.至此專案部署成功，在瀏覽器下輸入:  http://ip/test1/index.html  即可