vue打包之后在本地运行,express搭建服务器,nginx 本地服务器运行
一、使用http-server
1.安装http-server
npm install -g http-server
2.通过命令进入到dist文件夹
3.运行http-server

以上在浏览器输入上面地址就可以访问了
二、使用nodejs和express搭建服务器
使用express可以快速搭建一个完整的网站
1. 需要先安装nodejs
2.全局安装express-generator
npm install express --save -g
npm install express-generator --save -g
3. 创建一个 express 项目
express 项目名字
express express-Test
进入项目 cd express-Test
安装依赖 npm i
启动项目 npm start
4.打包之后的文件复制到 express-test 中的 public 中
注意:是打包之后dist里面的文件,不包含 dist 结构,放在express-Test中的public文件夹下面


5.启动项目
npm start
终端出现 node ./bin/www 表示运行成功,
启动之后浏览器打开localhost:3000就可以访问

6.分析express文件
1.package.json 文件
在执行npm start 等价于执行 'node ./bin/www'
dependencies 中是依赖的包
在 bin/www 中,首先 var app = require('../app'); 首先加载app.js文件


app.js是整个项目的入口文件,加载依赖包,配置中间件,加载路由等,最后在www文件中启动服务
7.额外操作,在修改js文件的时候,需要重新运行,修改后的js才会生效,可以使用 nodemon 让node.js应用自动重启
1.全局安装 nodemon
npm install nodemon -g
2.在项目目录下新建 nodemon.json 文件并添加下面代码
{
"restartable": "rs",
"ignore": [
".git",
".svn",
"node_modules/**/node_modules"
],
"verbose": true,
"execMap": {
"js": "node --harmony"
},
"watch": [
],
"env": {
"NODE_ENV": "development"
},
"ext": "js json njk css js "
}
3.将 package.json 中的 start 修改为 nodemon ./bin/www
以上就配置完成 nodemon ,相当于热加载
三、使用 nginx 本地服务器运行
1.下载nginx
http://nginx.org/en/download.html
2.下载之后解压目录如下

3.打开html文件夹,删除里面的所有内容,将打包好的dist文件夹里面的内容,全部复制到html文件夹下面

4.打开conf文件夹,找到 nginx.conf 文件

5.启动项目
双击 nginx.exe
6.浏览器输入访问地址
localhost:8088
vue打包之后在本地运行,express搭建服务器,nginx 本地服务器运行的更多相关文章
- 本地windows下搭建git的本地服务器
本地windows下搭建git的本地服务器 准备工作: 本地安装java环境,配置环境变量(略) 下载gitblit文件,百度一大堆 开始第一步: 减压gitblit压缩包到某个目录下,比如我在:H: ...
- express搭建简易web的服务器
express搭建简易web的服务器 说到express我们就会想到nodejs,应为它是一款基于nodejs平台的web应用开发框架.既然它是基于nodejs平台的框架那么就得先安装nodejs. ...
- nodejs+express搭建小程序后台服务器
本文使用node.js和express来为小程序搭建服务器.node.js简单说是运行在服务端的javascript:而express是node.js的一个Web应用框架,使用express可以非常简 ...
- Vue.js(15)之 json-server搭建模拟的API服务器
json-server搭建模拟的API服务器 运行命令 npm install json-server -D 全局安装 json-server 项目根目录下创建 mock 文件夹 mock 文件夹下添 ...
- Linux线上与本地的httpd搭建【制作本地yum源】
当前时间 2019-10-24-10:53:12 制作本地yum源 我用的VMware Workstation 系统环境: CentOS 7.5 首先我们先要挂载系统镜像 [root@laopa ~] ...
- Node:使用express搭建一个简易的服务器
①安装node环境 在node.js官网下载LTS长期支持版本,然后傻瓜式安装 ②查看是否安装成功 打开cmd终端,输入node -v 有版本号,则安装成功.再输入npm -v 有版本号,则npm也安 ...
- flask运行环境搭建(nginx+gunicorn)
系统:CentOS7.2(阿里云ESC) 1.python版本,使用的是默认的python2.7(或者先安装python3) 2.安装nginx,yum install -y nginx 3.安装vi ...
- 傻瓜式搭建php+nginx+mysql服务器环境
1.安装nginx 1.安装yum源 rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0. ...
- 搭建https+nginx服务器
搭建https+nginx的服务器,主要是安装ngnix和使用openssl生成自签证书,并在nginx中配置的过程 一.安装环境 1.安装opnssl(ssl支持) https://www.op ...
随机推荐
- Zabbix 5.0 LTS版本的安装小结
Zabbix 5.0 LTS版本的安装小结 1:准备Zabbix的服务器. 这里可能需要一台或多台服务器,视需求和资源而定.也可以将Zabbix_Server.MySQL.Zabbix Web等安 ...
- SpringBoot简单(登录/显示/登出)工程下载 附带打包成ROOT.war文件并发布到tomcat里
下载地址:https://files.cnblogs.com/files/xiandedanteng/SessionShare20191226-1.zip 之前的工程仅能在Eclispe里跑起来,要把 ...
- Apache2.4 下载和安装 - Win10
Apache安装包已放入百度网盘,链接地址在本文最后 1.下载Windows版本的Apahce安装包 a. 访问官网,进入下载页面 https://www.apachelounge.com (apac ...
- Java 8 Stream API实例
一.开篇 Stream?其实就是处理集合的一种形式,称之为流,在Java8中被引入,可被Collection中的子类调用. 作用?简化代码,提升你的开发效率. 不会?看完这篇你就能自己上手了! 二.实 ...
- CTF-Wechall-第三天上午
2020.09.11 奥力给,Wechall这平台不错哦,感觉是一个循序渐近的过程,可能是我是我这么排序的原因吧,hhhhh
- [剑指Offer]18-题目一:删除链表的节点 题目二:删除链表中重复节点
题目一 题目 O(1)时间复杂度删除给定链表节点. 题解 用待删除节点后一个节点的值覆盖待删除节点值,更新链接关系. 注意链表只有一个节点:删除尾结点:删除头节点的处理. 代码 class ListN ...
- openstack核心组件——nova计算服务(7)
云计算openstack核心组件——nova计算服务(7) 一.nova介绍: Nova 是 OpenStack 最核心的服务,负责维护和管理云环境的计算资源.OpenStack 作为 ...
- 面试题:JVM在Java堆中对对象的创建、内存结构、访问方式
一.对象创建过程 1.检查类是否已被加载 JVM遇到new指令时,首先会去检查这个指令参数能否在常量池中定位到这个类的符号引用,检查这个符号引用代表的类是否已被加载.解析.初始化,若没有,则进行类加载 ...
- 基本的PID算法整理(水缸的例子有问题!!)
一,先谈关于水缸漏水的问题 谈到PID原理入门的时候,大家经常会举的一个例子就是水缸漏水的例子.这里把一个解释水缸漏水的帖子放在这里:https://blog.csdn.net/qq_41736609 ...
- Java Web学习(十)Java拦截器
文章更新时间:2020/04/07 一.引言 既然要用拦截器,首先先得简单了解一下什么是拦截器: 概念:java里的拦截器是动态拦截Action调用的对象,它提供了一种机制可以使开发者在一个Actio ...