一、 使用express
- 项目安装express
npm i express -S
- app.js关键代码如下
// 引入express中间件
const express = require('express');
// 创建web服务器
const app = express();
// 指定启动服务器到哪个文件夹
app.use(express.static('./dist'));
// 启动服务器监听80端口
app.listen(80, () => {
console.log('web server running at http://127.0.0.1');
})
- 启动服务
// 当前项目文件夹下运行
node app.js
- 打开浏览器访问相应地址即可看到项目
二、使用 http-server
强烈推荐，比较简单
- 全局安装http-server
npm i http-server -g
- 启动服务
// 进入到dist文件夹下运行指令
http-server // 默认端口
http-server -p 8000 // 指定端口
- 打开浏览器访问相应地址即可看到项目
三、本地配置webpack启动
- 初始npm
npm init
- 安装webpack-dev-server
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
-
项目目录构造如下
img.png 新建webpack.config.js文件
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js"
},
devServer: {
open: true,
port: 3000,
hot: true
},
plugins: [
new HTMLWebpackPlugin({
template: "./src/index.html"
})
]
}
- package.json的script配置如下
"start": "webpack-dev-server",
"build": "webpack"
- 启动开发服务
npm run start
- 打包生产
npm run build
四、VSCode启动服务
-
安装VSCode插件
img_1.png -
鼠标选中html文件
img_2.png 浏览器即开启服务
五、webstorm启动服务
-
鼠标右键
img_3.png -
偏好设置配置，可外部机器访问
img_4.png
六、安装Nginx
- 官网地址：http://nginx.org/en/download.html
-
把你需要访问的文件放入html文件夹内，默认进入的是 index.html 。
image.png - 启动方法有两种
3.1 进入目录
start nginx
3.2 双击 nginx.exe ，即可启动
- 浏览器访问localhost 或 http://127.0.0.1/，端口默认80，可不写。如果想换一个端口号，可以修改 Nginx -> conf -> nginx.conf 配置文件，找到 80 替换成你想要的。
