美文网首页web工具DJANGO
Day 13 前端项目使用nginx打包部署

Day 13 前端项目使用nginx打包部署

作者: 忆曦雪_ | 来源:发表于2019-03-31 20:20 被阅读263次

nginx安装配置:https://www.runoob.com/linux/nginx-install-setup.html

前期准备

  • 将要打包的项目的config目录下的index.js文件做修改,将build下的assertsPublicPath的"/"修改为"./",注意dev下的不需要修改
    修改
  • 路由模式修改
    将router下的index.js路由文件的history模式去掉


    去掉

开始打包

  • 在该项目路径下,运行打包命令
    npm run build
  • build结束后的结果,项目路径会出现一个dist目录


    运行结果
    dist目录
  • 进入dist目录


    dist目录

部署项目

  • 将下载的nginx解压到本地目录


    解压到本地
  • 复制之前打包的dist文件夹到nginx的html目录


    复制
  • 通过命令行进入nginx目录后,运行
    start nginx
    会出现一闪而过的效果
    *打开浏览器,输入http://localhost(默认端口号,如果80端口号被占用或者有问题,可以在conf目录下修改端口号),可以看到nginx的首页
    欢迎页面
  • 输入http://localhost/dist,可以看到项目运行结果
    项目运行结果

nginx 相关命令

  • 验证配置是否正确: nginx -t

  • 查看Nginx的版本号:nginx -V

  • 启动Nginx:start nginx

  • 快速停止或关闭Nginx:nginx -s stop

  • 正常停止或关闭Nginx:nginx -s quit

  • 配置文件修改重装载命令:nginx -s reload

错误情况:

nginx: [error] CreateFile() "E:\nginx\nginx-1.9.3/logs/nginx.pid" failed

nginx: [error] Open() "E:\nginx\nginx-1.9.3/logs/nginx.pid" failed

使用命令创建/logs/nginx.pid文件: nginx -c conf/nginx.conf

相关文章

网友评论

    本文标题:Day 13 前端项目使用nginx打包部署

    本文链接:https://www.haomeiwen.com/subject/faiubqtx.html