vuel-cli项目,通过node serve 部署,本地预览项目发布效果

93 阅读1分钟

Vue-cli 官网相关指南:

image.png

1、通过命令行方式来启动服务器:serve -s dist

该命令来启动静态服务器并提供dist目录下的文件时 它会默认将当前目录下的dist目录作为静态文件目录,并启动一个静态服务器。这样就可以通过访问 http://localhost:5000 (默认端口号为5000)来访问dist目录下的文件。

如果你需要自定义一些参数,可以直接在命令行中添加相应的选项,例如:

  • serve -s dist -l 8080

    :指定端口号为8080。

  • serve -s dist -c myconfig.json

    :使用指定的配置文件myconfig.json。

2、通过运行配置文件来启动服务器

比如:项目根目录新增server.js配置文件,通过终端命令 node server.js执行

const http = require('http')
const fs = require('fs')
const httpPort = 4000 // 指定端口

http
  .createServer((req, res) => {
    fs.readFile('dist/index.html', 'utf-8', (err, content) => {
      if (err) {
        console.log('We cannot open "index.html" file.')
      }

      res.writeHead(200, {
        'Content-Type': 'text/html; charset=utf-8'
      })

      res.end(content)
    })
  })
  .listen(httpPort, () => {
    console.log('Server listening on: http://localhost:%s', httpPort)
  })

参考:

router.vuejs.org/zh/guide/es… cli.vuejs.org/zh/guide/de…