Vue cli + Webpack-simple 怎么修改生產(chǎn)環(huán)境下運(yùn)行的端口？

項(xiàng)目是用vue cli + webpack-simple 做的，開(kāi)發(fā)環(huán)境下運(yùn)行 npm run dev，默認(rèn)運(yùn)行在localhost：8080端口，想要修改端口，于是在"dev“后增加了--port 8081

原根目錄下package.json中的程序

{
  ...
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  ...
}

修改后程序

{
  ...
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8081",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  ...
}

那么問(wèn)題來(lái)了

目前項(xiàng)目部署至云端，每次運(yùn)行的是生產(chǎn)環(huán)境，那么生產(chǎn)環(huán)境應(yīng)該怎么配置運(yùn)行端口呢？
注：樓主用的是Webpack-simple（用webpack可以再根目錄下的config/index.js中直接修改port，但是Webpack-simple沒(méi)有這個(gè)文件）

回答

編輯回答

你好胸

很簡(jiǎn)單的問(wèn)題花了兩天時(shí)間，終于解決了，我F...佛慈悲，咳咳嗯，正經(jīng)說(shuō)說(shuō)怎么回事

背景介紹

項(xiàng)目是要部署在阿里云上對(duì)外的，簡(jiǎn)單說(shuō)就是要大家在地址欄敲個(gè)xxx.com就能訪問(wèn)到我的網(wǎng)站。而樓主之前一直項(xiàng)目組做本地調(diào)試

假設(shè)本地有兩個(gè)Vue工程，如果一個(gè)工程被npm run dev，就會(huì)跑在localhost:8080，那么80端口被占用了，不能再占一個(gè)8080，只能改用8081，做法如題問(wèn)中描述
但是，當(dāng)發(fā)布到阿里云之后，設(shè)置好的8081不起作用了怎么回事呢？

現(xiàn)在針對(duì)同一個(gè)阿里云分配的IP地址，樓主申請(qǐng)了兩個(gè)域名hehe.com和lala.com，希望訪問(wèn)hehe.com時(shí)對(duì)應(yīng)顯示工程hehe，訪問(wèn)lala.com時(shí)，對(duì)應(yīng)顯示工程lala

通過(guò)nginx配置使同一IP對(duì)應(yīng)多個(gè)域名和多個(gè)項(xiàng)目

其實(shí)我們的所有設(shè)置都是針對(duì)開(kāi)發(fā)環(huán)境（關(guān)鍵字：dev/development），而部署在阿里云上被稱(chēng)為生產(chǎn)環(huán)境（關(guān)鍵字：production）

那生產(chǎn)環(huán)境怎么還不受代碼控制呢？這個(gè)需要展開(kāi)來(lái)講：

我們開(kāi)發(fā)的工程，需要一步步測(cè)試調(diào)試
在開(kāi)發(fā)環(huán)境下修改一小段code都可以看到相應(yīng)的效果
而當(dāng)你解決所有bug，認(rèn)為代碼perfect的時(shí)候，就會(huì)npm run build
這是做什么呢？就是把你的項(xiàng)目打包成一個(gè)靜態(tài)文件，什么叫靜態(tài)文件？Emmm...就理解成打包成一坨，里里外外都不能改的，可以直接運(yùn)行出你perfect的效果

這個(gè)文件在哪里呢？當(dāng)你build之后會(huì)看到根目錄下有個(gè)dist文件，吶，就是這個(gè)，先記住他哦

然后就可以運(yùn)行了么？Nope
這是個(gè)文件，讓它run在阿里云服務(wù)器上我們需要一個(gè)代理服務(wù)器nginx，你可以理解為你有個(gè).doc文件，總需要個(gè)Microfoft Word來(lái)打開(kāi)的對(duì)吧，這里的nginx可以幫你打開(kāi)靜態(tài)文件讓它run起來(lái)

所以

步驟

你要在阿里云上安裝一個(gè)nginx
這里有教程nginx的安裝配置和使用： https://segmentfault.com/a/11...
nginx有一個(gè)配置文件nginx.conf,吶關(guān)鍵來(lái)啦，這個(gè)配置文件可以幫助我們實(shí)現(xiàn)對(duì)應(yīng)域名，對(duì)應(yīng)文件的強(qiáng)大功能啦，下面粘貼一小段配置代碼，可以看到hehe工程和hehe.com對(duì)對(duì)應(yīng)起來(lái)了，可以看到lala工程和lala.com對(duì)對(duì)應(yīng)起來(lái)了，
而端口號(hào)可以通過(guò)修改listen后的數(shù)字來(lái)設(shè)置

#第一個(gè)服務(wù)器
server {
       #這里的default_server標(biāo)識(shí)服務(wù)器為默認(rèn)服務(wù)器，無(wú)對(duì)應(yīng)域名情況下會(huì)對(duì)應(yīng)至該服務(wù)器
       listen 80 default_server;
       #和上一句語(yǔ)義相同，上句對(duì)應(yīng)Ipv4這里對(duì)應(yīng)Ipv6
       listen [::]:80 default_server;
        
       #對(duì)應(yīng)的靜態(tài)文件根目錄，把你的hehe工程的dist里面的內(nèi)容放在這里
       root /var/www/hehe;
 
       index index.html index.htm index.nginx-debian.html;
                        
       #對(duì)應(yīng)的第一個(gè)域名
       server_name hehe.com;
 
       location / {
           # First attempt to serve request as file, then
           # as directory, then fall back to displaying a 404.
           try_files $uri $uri/ @router;
           index index.html;
       }
       location @router{
           rewrite ^.*$ /index.html last;
       }
}
 
 
#第二個(gè)服務(wù)器
server {
    #這里應(yīng)該不設(shè)置default_server否則會(huì)報(bào)錯(cuò)，注：端口號(hào)可與另一服務(wù)器重復(fù)
    listen 80;
    listen [::]:80;
        
    #對(duì)應(yīng)的靜態(tài)文件路徑
    root /var/www/lala;

    index index.html index.htm index.nginx-debian.html;
    
    #對(duì)應(yīng)的第二個(gè)域名           
    server_name lala.com;
        
    location / {
      # First attempt to serve request as file, then
      # as directory, then fall back to displaying a 404.
      try_files $uri $uri/ @router;
      index index.html;
    }
    location @router{
      rewrite ^.*$ /index.html last;
    }
}

2018年9月10日 15:02

編輯回答