【学习笔记之vue】使用Nginx运行vue

下载http://nginx.org/en/download.html
【学习笔记之vue】使用Nginx运行vue_第1张图片
下一个稳定版本
在这里插入图片描述
加入环境变量
【学习笔记之vue】使用Nginx运行vue_第2张图片
加入path
【学习笔记之vue】使用Nginx运行vue_第3张图片
在nginx解压路径下输入cmd
【学习笔记之vue】使用Nginx运行vue_第4张图片
【学习笔记之vue】使用Nginx运行vue_第5张图片
在这里插入图片描述
或者双击
【学习笔记之vue】使用Nginx运行vue_第6张图片
之后erro显示:80端口冲突
【学习笔记之vue】使用Nginx运行vue_第7张图片

下面我们将80默认启动端口改成90

【学习笔记之vue】使用Nginx运行vue_第8张图片
【学习笔记之vue】使用Nginx运行vue_第9张图片
双击nginx.exe,在浏览器中输入地址http://localhost:90/,成功启动。

【学习笔记之vue】使用Nginx运行vue_第10张图片
将vue项目打包

>>>npm run build

将生成的dist文件下的内容放在nginx--->html文件下
【学习笔记之vue】使用Nginx运行vue_第11张图片
【学习笔记之vue】使用Nginx运行vue_第12张图片

双击nginx.exe,在浏览器中输入地址http://localhost:90/,再次成功启动就是vue项目的页面了。

你可能感兴趣的:(前端页面,学习,笔记,vue.js)