需求
在本地通过 http
的方式来访问 打包后的vue项目
打包后的文件直接在浏览器中打开会是 以 file:// 开头的,
打开之后文件引入的路径就出现了问题. 导致页面显示空白, 资源路径错误等问题.
使用 http 的方式访问, 以解决以上问题.
环境需要 node
- 在打包后的
dist
(打包后的文件夹名称) 下新建,app.js
(自己随意命名)
- 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)
-
启动
打开命令行工具. & 切换到项目目录.
键入 node app.js
来启动
使用 node 命令启动, 不会有热更新 (当你修改了 app.js 需要重新启动)
启动②: 因为启动之后是没有提示的, 所以我在启动之后做了打印,
// listen 的第二个参数是回调函数, 可以在回调中打印一些内容, 好知道启动成功了.
app.listen(3300, () => {
console.log('server start: ', 3300)
})
- 热更新 nodemon - npmjs
-
安装插件
npm i nodemon -g
. 此插件建议全局安装.安装完成, 以后就使用 nodemon 来代替 node 来启动, 当你修改 app.js 后并保存, 就会自动重新启动.
nodemon app.js