Vue 项目打包部署
今天我们带大家学习一下如何打包和部署项目。
在项目编写完成之后,我们在项目的根目录下运行以下命令:
npm run build
打包结束之后,我们可以看到项目目录里面多了 dist 夹,这个夹里面就是我们项目打包之后的。
我们在项目的根目录下创建 server.js,用来启动 vue 项目:
const@H__42@ fs =@H__42@ require@H__42@(@H__42@"fs"@H__42@)@H__42@;@H__42@
const@H__42@ path =@H__42@ require@H__42@(@H__42@"path"@H__42@)@H__42@;@H__42@
const@H__42@ bodyParser =@H__42@ require@H__42@(@H__42@"body-parser"@H__42@)@H__42@;@H__42@
const@H__42@ express =@H__42@ require@H__42@(@H__42@"express"@H__42@)@H__42@;@H__42@
const@H__42@ app =@H__42@ express@H__42@(@H__42@)@H__42@;@H__42@
const@H__42@ list =@H__42@ require@H__42@(@H__42@"./mock/list.json"@H__42@)@H__42@;@H__42@
app.@H__42@use@H__42@(@H__42@bodyParser.@H__42@json@H__42@(@H__42@)@H__42@)@H__42@;@H__42@
app.@H__42@use@H__42@(@H__42@bodyParser.@H__42@urlencoded@H__42@(@H__42@{@H__42@ extended:@H__42@ false@H__42@ }@H__42@)@H__42@)@H__42@;@H__42@ // 服务开启后访问指定编译好的dist下的数据@H__42@
app.@H__42@use@H__42@(@H__42@express.@H__42@static@H__42@(@H__42@path.@H__42@resolve@H__42@(@H__42@__dirname,@H__42@ "./dist"@H__42@)@H__42@)@H__42@)@H__42@;@H__42@
app.@H__42@get@H__42@(@H__42@"/todo/list"@H__42@,@H__42@ (@H__42@req,@H__42@ res)@H__42@ =>@H__42@ {@H__42@
res.@H__42@json@H__42@(@H__42@{@H__42@
data:@H__42@ list
}@H__42@)@H__42@;@H__42@
}@H__42@)@H__42@;@H__42@
app.@H__42@get@H__42@(@H__42@"*"@H__42@,@H__42@ function@H__42@(@H__42@req,@H__42@ res)@H__42@ {@H__42@
const@H__42@ html =@H__42@ fs.@H__42@readFileSync@H__42@(@H__42@
path.@H__42@resolve@H__42@(@H__42@__dirname,@H__42@ "./dist/index.html"@H__42@)@H__42@,@H__42@
"utf-8"@H__42@
)@H__42@;@H__42@
res.@H__42@send@H__42@(@H__42@html)@H__42@;@H__42@
}@H__42@)@H__42@;@H__42@
app.@H__42@listen@H__42@(@H__42@)@H__42@;@H__42@
运行命令:
node start.js
然后,访问 就可以正常预览项目了。
本节我们带大家学习了项目的打包部署,主要有以下知识点: