啟動服務(wù)器訪問vue工程打包好的資源文件

【方式一：】

利用NodeJS 的框架Express
首先自己電腦得安裝有NodeJS，然后再安裝express中間件
Express
[1].安裝expressr:

$npm i express --save -dev

[2].寫node腳本
server 文件夾下的 server.js代碼:

//引入express中間件
var express = require('express');
var app = express();

//指定啟動服務(wù)器到哪個文件夾，我這邊指的是dist文件夾
app.use(express.static('../dist'));

//監(jiān)聽端口為3000
app.listen(3000, function () {
  console.log(' app listening at http://localhost:3000');
});

image.png

[3].運行node腳本
在 server文件夾下面，打開命令行： node server.js 啟動服務(wù)，然后在瀏覽器訪問
http://localhost:3000/

image.png

【方式二】
利用npm 腳本，配置package.json ,插件http-server 本質(zhì)也是啟動一個node服

[1].安裝http-server:

$npm i http-server --save -dev

--save 保存到package.json
-dev 保存到devDependencies 開發(fā)環(huán)境中的依賴

  "dependencies": {
    "http-server": "^0.11.1",
   }

[2].npm腳本配置：

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node  build/build.js",
    "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit",
    "ser": "http-server -p 1002 dist/",
    "open": "opener http://localhost:1002"
  },

[3].測試使用過程：

npm run build 打包好dist文件
npm run ser 啟動服務(wù)器
npm run open 自動打開瀏覽器 （http://localhost:9090/#/）

[4].訪問時，命令行窗口中可以看到訪問此服務(wù)時候拿到的資源

image.png