一、 使用express

1. 项目安装express

   npm i express -S

2. 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');
})

3. 启动服务

// 当前项目文件夹下运行
node app.js

4. 打开浏览器访问相应地址即可看到项目

二、使用 http-server

强烈推荐，比较简单

1. 全局安装http-server

npm i http-server -g

2. 启动服务

// 进入到dist文件夹下运行指令
http-server // 默认端口
http-server -p 8000 // 指定端口

3. 打开浏览器访问相应地址即可看到项目

三、本地配置webpack启动

1. 初始npm

npm init

2. 安装webpack-dev-server

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D

3. 项目目录构造如下

   
   
   img.png

4. 新建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"
        })
    ]
}

5. package.json的script配置如下

"start": "webpack-dev-server",
"build": "webpack"

6. 启动开发服务

npm run start

7. 打包生产

npm run build

四、VSCode启动服务

1. 安装VSCode插件

   
   
   img_1.png

2. 鼠标选中html文件

   
   
   img_2.png

3. 浏览器即开启服务

五、webstorm启动服务

1. 鼠标右键

   
   
   img_3.png

2. 偏好设置配置，可外部机器访问

   
   
   img_4.png

六、安装Nginx

1. 官网地址：http://nginx.org/en/download.html

2. 把你需要访问的文件放入html文件夹内，默认进入的是 index.html 。

   
   
   image.png
3. 启动方法有两种
   3.1 进入目录

start nginx

3.2 双击 nginx.exe ，即可启动

4. 浏览器访问localhost 或 http://127.0.0.1/，端口默认80，可不写。如果想换一个端口号，可以修改 Nginx -> conf -> nginx.conf 配置文件，找到 80 替换成你想要的。