锐客网

  1. 首页 > it技术 > >

服务器|Windows服务器部署前端vue项目

nginxwindows服务器vue.js

阿里云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项目
    文章图片

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

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

服务器|Windows服务器部署前端vue项目
文章图片

  1. 此时你在服务器的浏览器上访问：localhost:8080 就可以展示前端页面了
    服务器|Windows服务器部署前端vue项目
    文章图片
注意！坑来了~
  1. 如果你页面显示的js、css路径不对的话，在前端项目vue.config.js中把路径改为./
    服务器|Windows服务器部署前端vue项目
    文章图片

  2. 如果你在浏览器上把localhost改为公网ip的话，无法访问 ???
    不要慌~
    如果你是第一次使用服务器，那么需要在云服务器上设置安全组
    服务器|Windows服务器部署前端vue项目
    文章图片

    想下面这样在 入方向 里添加一条就行（默认有三条，根据你配置的端口号去手动添加一条）
    服务器|Windows服务器部署前端vue项目
    文章图片

    重启一下Nginx
    nginx -s stop start nginx

    把localhost改成公网ip，就可以访问了
服务器|Windows服务器部署前端vue项目
文章图片

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

    推荐阅读


    上一篇：剑指offer进阶|剑指offer103（最少的硬币数目）

    下一篇：数据库|服务器项目部署（一）