路由配好了,需要调试下 build 后是否可用,这时我们需要一个服务端来运行静态网页。

官网直接下载一个 windows 版本的 ngnix 即可:

http://nginx.org/en/download.html

下载解压后:

命令行到此路径,启动 ngnix:

默认 80 端口:

常用配置在 conf 文件夹下 nginx.conf 中:

location 即为入口文件夹及主界面,静态资源可以直接放入 html 文件夹中:

此时访问 80 端口即可获取前端界面:

但是切换到其他路由界面,就会出现访问不到的情况

这是因为单页面应用路由被服务器解析成了获取文件地址,所以会报 404 找不到。可以通过配置 解决:

再重启下 ngnix

稍等一下,再刷新界面即可

本机访问无误后,可以将端口暴露给局域网访问:

1、打开控制面板,找到防火墙,选择高级设置

2、入栈规则中,新建规则

3、选择端口,下一步

4、特定端口,80,下一步

5、一直下一步

6、最后添加名称,点击完成

7、可以看到已经添加好了

其他ip 访问一下,没有问题:

vue3 门户网站搭建2-ngnix的更多相关文章

  1. linux下网站搭建

    我们知道windows网站搭建一般是:IIS+Asp+Sqlserver,而 linux网站搭建是:Apache+php+Mysql.两者之间个有千秋,但是为什么我们许多的门户网站搭建都选择linux ...

  2. 爬虫抓取5大门户网站和电商数据day1:基础环境搭建

    最新想用爬虫实现抓取五大门户网站(搜狐.新浪.网易.腾讯.凤凰网)和电商数据(天猫,京东,聚美等), 今天第一天先搭建下环境和测试. 采用maven+xpath+ HttpClient+正则表达式. ...

  3. 外网主机访问虚拟机下的Web服务器_服务器应用_Linux公社-Linux系统门户网站

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  4. 电商门户网站商品品类多级联动SpringBoot+Thymeleaf实现

    在淘宝.京东等电商网站,其门户网站都有一个商品品类的多级联动,鼠标移动,就显示,因为前端不是我做的,所以不说明前端实现,只介绍后端实现. 搭建部署SpringBoot环境 配置文件配置: 开启了对Th ...

  5. PHPCMS V9轻松完成WAP手机网站搭建全教程

    ---恢复内容开始--- 应用PHPCMS V9轻松完成WAP手机网站搭建全教程 用PHPCMS最新发布的V9搭建了PHPCMS研究中心网站(http://www.17huiyi.net)完成后,有用 ...

  6. 基于Vue开发的门户网站展示和后台数据管理系统

    基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...

  7. node.js express安装及示例网站搭建

    1.首先肯定是要安装Node.JS windows cmd依次输入如下命令: cd C:\Program Files\nodejs\ npm install -g expressnpm install ...

  8. SharePoint Online 创建门户网站系列之定制栏目

    前 言 SharePoint Online自带的库就带有二级页面和详细页面,也就是Allitems页面和DispForm页面,但是实在不够美观,尤其对于门户网站这一企业门面来说,更是无法接受. 下面, ...

  9. SharePoint Online 创建门户网站系列之创建栏目

    前 言 SharePoint Online的栏目,简单描述即显示在首页上的各个模块信息,这里,我们主要介绍我们首页上的栏目,包括简介类型.新闻列表类型.图片类型: 下面,让我们开始在SharePoin ...

  10. SharePoint Online 创建门户网站系列之图片滚动

    前 言 创建SharePoint Online栏目我们之前已经介绍过了,具体就是内容编辑器方式.自带WebPart方式和JavaScript读取后台数据前台做展示的三种: 但是,对于复杂的展示来说,这 ...

随机推荐

  1. 学习Java Day8

    今天学习了for循环,与C语言几乎无差异: 也学习了while和do while循环 今天学习了for循环,与C语言几乎无差异: 也学习了while和do while循环

  2. rt-thread模糊到清晰系列: ipc.c

    #include <rtthread.h> #include <rthw.h> #ifdef RT_USING_HOOK extern void (*rt_object_try ...

  3. 微信小程序分包

    当我们程序太大的时候,打开小程序就会比较慢,此处就需要用到分包加载,按照模块划分不同的包,让用户在需要的时候才加载对用的模块,也就是用户在进入某些页面的时候才下载该页面的资源,提高小程序的打开速度,以 ...

  4. python 合并目标文件夹中多个txt文件到指定文件中

    # coding = 'utf-8' # description: 合并目标文件夹中多个txt文件,到指定文件中. import os def file_merge_to_one(dirpath): ...

  5. vue的数据更新视图不同步的处理用Vue.$set()

    // vue的数据更新视图不同步的处理用Vue.$set() // 通过Vue.set方法设置data属性vm.$set(最终值,数组索引,数组值) ==Vue.$set(arr,index,val) ...

  6. 基于C++的OpenGL 10 之光照贴图

    1. 引言 本文基于C++语言,描述OpenGL的光照贴图 前置知识可参考: 基于C++的OpenGL 09 之材质 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com) 笔者这里不过多描 ...

  7. 基于C++的OpenGL 09 之材质

    1. 引言 本文基于C++语言,描述OpenGL的材质 前置知识可参考: 基于C++的OpenGL 08 之基础光照 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com) 笔者这里不过多描 ...

  8. 基于Linux编译JDK18

    1.概述 JDK都没手动编译过,敢说自己是Java程序员吗?(By 羊哥--JDK都没手动编译过,敢说自己是Java程序员吗?实战编译Java源码(JDK源码,JVM)视频教程_哔哩哔哩_bilibi ...

  9. ClickHouse(13)ClickHouse合并树MergeTree家族表引擎之CollapsingMergeTree详细解析

    目录 建表 折叠 数据 算法 资料分享 参考文章 该引擎继承于MergeTree,并在数据块合并算法中添加了折叠行的逻辑.CollapsingMergeTree会异步的删除(折叠)这些除了特定列Sig ...

  10. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree

    VScode报错:npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree 不能解析依赖树 ,需要先修复上面 ...