Angular项目打包部署到Express本地服务器(同样适用于Vue、React项目)

步骤一:执行npm run build命令,生成打包文件dist(此处注意dist文件夹下可能多了一层以项目命名的文件夹,将其中的内容copy到dist文件夹下并删除以项目命名的文件夹)

步骤二:使用express-generator快速搭建express本地服务器

全局安装express-generator
$ npm install express-generator -g
搭建express本地服务器
express --view=ejs myapp
安装依赖包
$ cd myapp
$ npm install
启动
$ npm run start
浏览器输入localhost:3000就可以看到启动成功的本地服务器

步骤三:将步骤一的dist文件夹copy到myapp目录下,修改app.js文件,将‘public’修改为‘dist’。

// app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'dist')))

步骤四:重新启动,浏览器输入localhost:3000查看。(如果项目路由使用的是history模式,刷新浏览器会报404错误,请看我的另一篇文章《connect-history-api-fallback中间件解决history路由模式浏览器刷新404问题》)

你可能感兴趣的:(express,node.js,angular)