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

时间:2024-03-21 19:54:48

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

一.前序工作

1.使用npm run build将vue项目生成浏览器可以识别的html js等资源,存放在dist目录下,(npm run build命令执行的是当前项目下的package.json文件中scripts中的脚本命令)
vue项目部署到nginx和node服务器
2.找到dist目录,并它目录下的所有文件
vue项目部署到nginx和node服务器

二 部署到线上

1.部署到nginx
  1. 去nginx官网下载nginx并解压缩
    vue项目部署到nginx和node服务器

  2. 将刚才从dist复制的文件粘贴到html目录下
    vue项目部署到nginx和node服务器

  3. 配置nginx.conf(conf/nginx.conf) 当然也可以另外新建一个配置文件,在启动项目的时候指定即可
    vue项目部署到nginx和node服务器

  4. 启动项目
    vue项目部署到nginx和node服务器

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

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

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

  2. 使用express -e 项目名 创建一个项目
    vue项目部署到nginx和node服务器

    1. 将刚才从dist复制的文件粘贴到asd/public目录下(和上面步骤2类似)
    2. cd asd 进入项目目录 执行npm install(cnpm install)安卓项目所依赖的模块
    3. npm start 启动项目
    4. 打开浏览器在localhost:3000访问
以上就是我的一些心得,有错误的地方请大家多多指正