项目是用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没有这个文件)
很简单的问题花了两天时间,终于解决了,我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起来所以
步骤
这里有教程nginx的安装配置和使用: https://segmentfault.com/a/11...
nginx.conf
,呐关键来啦,这个配置文件可以帮助我们实现对应域名,对应文件的强大功能啦,下面粘贴一小段配置代码,可以看到hehe工程和hehe.com对对应起来了,可以看到lala工程和lala.com对对应起来了,端口号
可以通过修改listen
后的数字来设置