美文网首页前端
如何用Nginx将本地vue打包的dist包运行起来

如何用Nginx将本地vue打包的dist包运行起来

作者: 辉夜真是太可爱啦 | 来源:发表于2020-02-05 12:03 被阅读0次
    第一次接触nginx自己将dist包跑起来,平常都是用后端给的xftp将dist包传到服务器上即可,特此记录一下,其实很简单
    1.假设此处你已经将dist包打包完成,如果没有打包,在项目位置命令提示符敲入npm run build即可
    2.安装nginx,http://nginx.org/en/download.html,选择Stable version稳定版即可,下载下来以后解压
    3.将dist包放入解压好的nginx文件夹中,如图所示
    image.png
    4.修改conf文件夹下的nginx.conf文件,修改两处即可,第一个为监听的端口号,第二个为dist,将文件保存(如果你打包到服务器上一般默认写80端口)
    image.png
    5.来到之前有nginx.exe的项目目录下,在此处运行命令提示符,运行start nginx将服务启动,就可以看到你打包好的dist文件啦,localhost: + 你刚刚监听的端口号
    image.png
    6.由于vue是SPA,所以,当访问服务器上的路由路径时,会找不到文件然后404,所以,要添加一句tryfiles在location中,配置完的代码如下
    location /{
        root disk;
        index index.html index.htm
        try_files $uri $uri/ /index.html;
    }
    
    7.其余nginx常用的操作为
    start nginx        启动nginx
    nginx -s quit      安全关闭
    nginx -s stop      强制关闭
    nginx -s reload    改变配置文件时,重启nginx工作进程,使配置生效
    nginx -s reopen    打开日志文件
    nginx -v           查看版本
    nginx -h           查看帮助信息
    

    相关文章

      网友评论

        本文标题:如何用Nginx将本地vue打包的dist包运行起来

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