vue-dist访问-搭建本地服务器

启动服务器访问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();

//指定启动服务器到哪个文件夹，我这边指的是dist文件夹
app.use(express.static('../dist'));

//监听端口为3000
app.listen(3000, function () {
  console.log(' app listening at http://localhost:3000');
});

image.png

[3].运行node脚本
在 server文件夹下面，打开命令行： node server.js 启动服务，然后在浏览器访问
http://localhost:3000/

image.png

【方式二】
利用npm 脚本，配置package.json ,插件http-server 本质也是启动一个node服

[1].安装http-server:

$npm i http-server --save -dev

--save 保存到package.json
-dev 保存到devDependencies 开发环境中的依赖

  "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 启动服务器
npm run open 自动打开浏览器 （http://localhost:9090/#/）

[4].访问时，命令行窗口中可以看到访问此服务时候拿到的资源

image.png