Vue cli + Webpack-simple 怎么修改生产环境下运行的端口？

Question

项目是用vue cli + webpack-simple 做的，开发环境下运行 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"
  },
  ...
}

那么问题来了

目前项目部署至云端，每次运行的是生产环境，那么生产环境应该怎么配置运行端口呢？
注：楼主用的是Webpack-simple（用webpack可以再根目录下的config/index.js中直接修改port，但是Webpack-simple没有这个文件）

Answer 1

很简单的问题花了两天时间，终于解决了，我F...佛慈悲，咳咳嗯，正经说说怎么回事

背景介绍

项目是要部署在阿里云上对外的，简单说就是要大家在地址栏敲个xxx.com就能访问到我的网站。而楼主之前一直项目组做本地调试

假设本地有两个Vue工程，如果一个工程被npm run dev，就会跑在localhost:8080，那么80端口被占用了，不能再占一个8080，只能改用8081，做法如题问中描述
但是，当发布到阿里云之后，设置好的8081不起作用了怎么回事呢？

现在针对同一个阿里云分配的IP地址，楼主申请了两个域名hehe.com和lala.com，希望访问hehe.com时对应显示工程hehe，访问lala.com时，对应显示工程lala

通过nginx配置使同一IP对应多个域名和多个项目

其实我们的所有设置都是针对开发环境（关键字：dev/development），而部署在阿里云上被称为生产环境（关键字：production）

那生产环境怎么还不受代码控制呢？这个需要展开来讲：

我们开发的工程，需要一步步测试调试
在开发环境下修改一小段code都可以看到相应的效果
而当你解决所有bug，认为代码perfect的时候，就会npm run build
这是做什么呢？就是把你的项目打包成一个静态文件，什么叫静态文件？Emmm...就理解成打包成一坨，里里外外都不能改的，可以直接运行出你perfect的效果

这个文件在哪里呢？当你build之后会看到根目录下有个dist文件，呐，就是这个，先记住他哦

然后就可以运行了么？Nope
这是个文件，让它run在阿里云服务器上我们需要一个代理服务器nginx，你可以理解为你有个.doc文件，总需要个Microfoft Word来打开的对吧，这里的nginx可以帮你打开静态文件让它run起来

所以

步骤

1. 你要在阿里云上安装一个nginx
   这里有教程nginx的安装配置和使用： https://segmentfault.com/a/11...
2. nginx有一个配置文件nginx.conf,呐关键来啦，这个配置文件可以帮助我们实现对应域名，对应文件的强大功能啦，下面粘贴一小段配置代码，可以看到hehe工程和hehe.com对对应起来了，可以看到lala工程和lala.com对对应起来了，
3. 而端口号可以通过修改listen后的数字来设置

#第一个服务器
server {
       #这里的default_server标识服务器为默认服务器，无对应域名情况下会对应至该服务器
       listen 80 default_server;
       #和上一句语义相同，上句对应Ipv4这里对应Ipv6
       listen [::]:80 default_server;
        
       #对应的静态文件根目录，把你的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;
        
    #对应的静态文件路径
    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;
    }
}

Answer 2

感觉你根本没有搞清楚webpack，你永远都在运行开发模式下！！！！！！

开发结束后，应该运行 npm run build ；将所有文件输出即可，再将文件上传到web服务器所在的目录就行了，web服务一般只会监听在80或者443端口上！！！！

你根本不需要配置什么端口！本地开发时为了开发方便才需要设置开发服务器的端口！