dist文件布置到服务器,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