一摹菠、 使用express
- 項目安裝express
npm i express -S
- app.js關(guān)鍵代碼如下
// 引入express中間件
const express = require('express');
// 創(chuàng)建web服務(wù)器
const app = express();
// 指定啟動服務(wù)器到哪個文件夾
app.use(express.static('./dist'));
// 啟動服務(wù)器監(jiān)聽80端口
app.listen(80, () => {
console.log('web server running at http://127.0.0.1');
})
- 啟動服務(wù)
// 當前項目文件夾下運行
node app.js
- 打開瀏覽器訪問相應(yīng)地址即可看到項目
二盒卸、使用 http-server
強烈推薦，比較簡單
- 全局安裝http-server
npm i http-server -g
- 啟動服務(wù)
// 進入到dist文件夾下運行指令
http-server // 默認端口
http-server -p 8000 // 指定端口
- 打開瀏覽器訪問相應(yīng)地址即可看到項目
三辨嗽、本地配置webpack啟動
- 初始npm
npm init
- 安裝webpack-dev-server
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
-
項目目錄構(gòu)造如下
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"
- 啟動開發(fā)服務(wù)
npm run start
- 打包生產(chǎn)
npm run build
四世落、VSCode啟動服務(wù)
-
安裝VSCode插件
img_1.png -
鼠標選中html文件
img_2.png 瀏覽器即開啟服務(wù)
五淮腾、webstorm啟動服務(wù)
-
鼠標右鍵
img_3.png -
偏好設(shè)置配置糟需，可外部機器訪問
img_4.png
六、安裝Nginx
- 官網(wǎng)地址：http://nginx.org/en/download.html
-
把你需要訪問的文件放入html文件夾內(nèi)谷朝，默認進入的是 index.html 洲押。
image.png - 啟動方法有兩種
3.1 進入目錄
start nginx
3.2 雙擊 nginx.exe ，即可啟動
- 瀏覽器訪問localhost 或 http://127.0.0.1/圆凰，端口默認80杈帐，可不寫。如果想換一個端口號，可以修改 Nginx -> conf -> nginx.conf 配置文件挑童，找到 80 替換成你想要的累铅。
