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

項目是用vue cli + webpack-simple 做的，開發(fā)環(huán)境下運行 npm run dev，默認運行在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"
  },
  ...
}

那么問題來了

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

回答

編輯回答

你好胸

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

背景介紹

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

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

現(xiàn)在針對同一個阿里云分配的IP地址，樓主申請了兩個域名hehe.com和lala.com，希望訪問hehe.com時對應顯示工程hehe，訪問lala.com時，對應顯示工程lala

通過nginx配置使同一IP對應多個域名和多個項目

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

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

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

這個文件在哪里呢？當你build之后會看到根目錄下有個dist文件，吶，就是這個，先記住他哦

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

所以

步驟

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

#第一個服務器
server {
       #這里的default_server標識服務器為默認服務器，無對應域名情況下會對應至該服務器
       listen 80 default_server;
       #和上一句語義相同，上句對應Ipv4這里對應Ipv6
       listen [::]:80 default_server;
        
       #對應的靜態(tài)文件根目錄，把你的hehe工程的dist里面的內容放在這里
       root /var/www/hehe;
 
       index index.html index.htm index.nginx-debian.html;
                        
       #對應的第一個域名
       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;
       }
}
 
 
#第二個服務器
server {
    #這里應該不設置default_server否則會報錯，注：端口號可與另一服務器重復
    listen 80;
    listen [::]:80;
        
    #對應的靜態(tài)文件路徑
    root /var/www/lala;

    index index.html index.htm index.nginx-debian.html;
    
    #對應的第二個域名           
    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

編輯回答