vue项目部署到nginx和node服务器

vue项目部署到nginx和node服务器

一.前序工作

1.使用npm run build将vue项目生成浏览器可以识别的html js等资源,存放在dist目录下,(npm run build命令执行的是当前项目下的package.json文件中scripts中的脚本命令)

2.找到dist目录,并它目录下的所有文件

二 部署到线上

1.部署到nginx

1. 去nginx官网下载nginx并解压缩
   

2. 将刚才从dist复制的文件粘贴到html目录下
   

3. 配置nginx.conf(conf/nginx.conf) 当然也可以另外新建一个配置文件,在启动项目的时候指定即可
   

4. 启动项目
   

5. 现在就可以打开浏览器通过http://localhost/访问了

6. ./nginx.exe -s reload 可以重新加载修改后的文件 不用重新启动nginx

2.部署到node服务器

1. 为了快速搭建一个node项目,这里使用express-generator工具
   使用npm install -g express-generator即可快速安装,这里不做过多阐述

2. 使用express -e 项目名 创建一个项目
   

   3. 将刚才从dist复制的文件粘贴到asd/public目录下(和上面步骤2类似)
   4. cd asd 进入项目目录 执行npm install(cnpm install)安卓项目所依赖的模块
   5. npm start 启动项目
   6. 打开浏览器在localhost:3000访问

以上就是我的一些心得,有错误的地方请大家多多指正