admin管理员组文章数量:1601629
vue项目部署–本地Windows10运行，使用nginx运行vuecli
- 本地Windows10运行（本篇）
- 服务器Linux运行
- 设置自动部署
文章目录
- vue项目部署--本地Windows10运行，使用nginx运行vuecli
- 1.环境、工具
- 2.步骤概述
- 3.详细步骤
- 1.项目打包成dist文件夹
- 2.使用nginx运行项目
- 3.修改配置文件
- 4.通过载入其他配置文件，启动项目
- 5.新建配置文件（单个项目配置文件）
- 6.将项目文件dist移入nginx
- 4.cmd对nginx操作
- 5.借鉴学习博客
- 6.启动vue项目的三种方式
1.环境、工具
| 工具 | 版本 |
|---|---|
| npm | |
| node | |
| vue-cli | |
| VScode（编辑代码） | |
| sublime_text（编辑配置文件） | |
| nginx（项目运行） |
文件目录，如过一下使用到路径问题，可根据此表格查看我各个文件目录
| 文件目录 | 具体位置（本地） |
|---|---|
| vue项目路径 | E:\work-Vue\demo02-20.1.14 |
| nginx服务路径 | E:\work-www\nginxS\nginx-1.17.9 |
2.步骤概述
- 将vue项目打包成dist（默认）文件夹
- 通过工具将dist文件夹运行起来
- 将dist文件夹移动，测试上传后是否能启动
3.详细步骤
1.项目打包成dist文件夹
项目打包非常简单，网上有许多教程，本文不做详细解释
代码
npm run build
打包成功后生成dist文件夹（默认）
打开vue项目目录，可找到打包文件夹
打包后文件夹内容
2.使用nginx运行项目
通过网址http://nginx/en/download.html下载nginx，
我下载的版本是当前最新版1.17.9，
下载完成后，解压安装到nginx目录E:\work-www\nginxS
解压完成截图
解压文件内容
注：使用cmd启动服务时，需进入此文件夹，否则会报错找不到nginx
3.修改配置文件
当期使用默认配置文件，待项目运行成功后，再配置按照项目区分
通过sublime工具打开文件nginx目录/conf/nginx.conf
跟在serve后面新建个serve
注：
1.其中E:\work-Vue\demo02-20.1.14\dist为vue项目打包
2.index配置为out/index.html是因为我index.html放到了out/文件夹下
3.本文件夹文身有serve，我未做修改，这个serve和原有的并级
server {
listen 8088;
server_name 127.0.0.1;
location / {
root E:\work-Vue\demo02-20.1.14\dist;
index out/index.html;
try_files $uri $uri/ index.html;
}
}
项目启动成功
4.通过载入其他配置文件，启动项目
避免项目过多，配置杂乱，使用include根据项目引入配置
引入代码，将所有domainS文件夹下，conf后缀的文件载入配置
注：
1.此处include位置无要求，但应放到http层下
2.通过搜索include，可找到本身原有配置include mime.types;可将其放到此处下一行，便于查看
3.domainS为新建文件夹名称，无要求，但是不能取名单个字母（我使用d做文件夹名称时，引用不到子配置文件）
4.记得注释新添加的serve，注释文件使用#符号
include domainS/*.conf;
5.新建配置文件（单个项目配置文件）
新建单个项目配置文件chat.conf
编辑内容（同上级配置文件serve），本文只有一个本项目serve
启动项目成功
6.将项目文件dist移入nginx
打包目录E:\work-Vue\demo02-20.1.14\dist将dist文件夹
移入nginx存放项目目录E:\work-www\nginxS\nginx-1.17.9\html，并重命名为vueS
chat.conf配置修改路径为html/vueS
通过cmd启动项目，成功
4.cmd对nginx操作
启动
start nginx
停止
nginx -s quit
nginx -s stop
重启
nginx -s reload
5.借鉴学习博客
因查阅太多，用云笔记整理
链接：http://note.youdao/noteshare?id=1828c7802bb0d276e5bc2e9bc2e0ee8d&sub=E5C5985999B34418958F13869A0C7EE3
6.启动vue项目的三种方式
- nginx启动
- Tomcat启动
- express启动
版权声明：本文标题：Vue--vue项目部署--1.本地Windows10运行，使用nginx运行vuecli 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1728378949a1156315.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论