Windows服务器部署前端vue项目

阿里云Windows服务器部署前端vue项目

准备工作

  1. 下载node.js(略)http://nodejs.cn/download/
  2. 下载Nginx http://nginx.org/en/download.html
  3. Nginx安装启用方法参考:参考1、参考2
    注意:刚下载完Nginx后,没有配置环境变量的情况下,需要去Nginx文件下使用命令窗口操作

Nginx

  1. 下载完后是这样子
    Windows服务器部署前端vue项目_第1张图片

  2. 把打包好的dist文件放入html目录下
    Windows服务器部署前端vue项目_第2张图片

  3. 找到conf/nginx.config文件,用文本方式打开,进行修改
    Windows服务器部署前端vue项目_第3张图片

Windows服务器部署前端vue项目_第4张图片

  1. 此时你在服务器的浏览器上访问:localhost:8080 就可以展示前端页面了
    Windows服务器部署前端vue项目_第5张图片

注意!坑来了~

  1. 如果你页面显示的js、css路径不对的话,在前端项目vue.config.js中把路径改为./
    Windows服务器部署前端vue项目_第6张图片

  2. 如果你在浏览器上把localhost改为公网ip的话,无法访问 ???

    不要慌~
    如果你是第一次使用服务器,那么需要在云服务器上设置安全组
    Windows服务器部署前端vue项目_第7张图片

    想下面这样在 入方向 里添加一条就行(默认有三条,根据你配置的端口号去手动添加一条)

    Windows服务器部署前端vue项目_第8张图片

    重启一下Nginx

    nginx -s stop
    start nginx
    

    把localhost改成公网ip,就可以访问了

Windows服务器部署前端vue项目_第9张图片

Nginx详细配置:https://www.cnblogs.com/dongye95/p/11096785.html#_label0_3

你可能感兴趣的:(服务器,服务器,vue.js,nginx,windows)