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

项目是用vue cli + webpack-simple 做的,开发环境下运行 npm run dev,默认运行在localhost:8080端口,想要修改端口,于是在"dev“后增加了--port 8081

clipboard.png

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

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

修改后程序

clipboard.png

{
  ...
  "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没有这个文件)

阅读 7.7k
2 个回答

很简单的问题花了两天时间,终于解决了,我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文件,呐,就是这个,先记住他哦

clipboard.png

然后就可以运行了么?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;
    }
}

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

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

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

推荐问题
宣传栏