手动实现简单Live-server. 开启本地服务器 node

需求

在本地通过 http 的方式来访问 打包后的vue项目

打包后的文件直接在浏览器中打开会是 以 file:// 开头的, 
打开之后文件引入的路径就出现了问题. 导致页面显示空白, 资源路径错误等问题.
使用 http 的方式访问, 以解决以上问题.

环境需要 node

1. 在打包后的 dist (打包后的文件夹名称) 下新建, app.js (自己随意命名)
   
2. app.js 内容

var http = require('http')
var fs = require('fs') // 操作文件
var path = require('path')

// 建议使用绝对路径访问文件
var resolve = function(dir) {
  return path.join(__dirname, dir)
}

var app = http.createServer(function(request, response) {
  var url = ''
  // 访问根路径的时候跳转到 index.html
  if (request.url === '/') {
    url = '/index.html'
  } else {
    url = request.url
  }
  // 通过请求路径, 来读取相对应的文件.
  var file = fs.readFileSync(resolve(url))
  // 返回内容.
  response.end(file)
})

// 开启监听, 端口自定.
app.listen(3300)

3. 启动

    打开命令行工具. & 切换到项目目录.
   

键入 node app.js 来启动
使用 node 命令启动, 不会有热更新 (当你修改了 app.js 需要重新启动)

启动②: 因为启动之后是没有提示的, 所以我在启动之后做了打印,

// listen 的第二个参数是回调函数, 可以在回调中打印一些内容, 好知道启动成功了.
app.listen(3300, () => {
  console.log('server start: ', 3300)
})

4. 热更新 nodemon - npmjs

• 安装插件 npm i nodemon -g. 此插件建议全局安装.

  安装完成, 以后就使用 nodemon 来代替 node 来启动, 当你修改 app.js 后并保存, 就会自动重新启动.
  nodemon app.js