2021-05-25 使用nodejs搭建web服务器&flutter开发web网站

1，安装node
2，创建node server 服务器
3，创建flutter web项目， 打包flutter web产物
4，拷贝flutter web产物，修改node server 服务器配置
5，启动node server 服务
6，查看部署后的效果

1、安装node

brew install node

取消sudo执行。 这一步可以先不执行。遇到问题了在做。

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} // 取消sudo执行。就是改变npm 工作目录的权限为 所属 当前用户

2、创建node server 服务

mkdir -p node/server // 创建工作目录

cd node/server
npm install express-generator -g // 下载express包, npm install xxx -g 会在当前目录下创建lib目录，并且创建bin目录，bin下存放命令的快捷链接，指向lib目录
./bin/express --view=pug myapp // 创建项目

cd myapp
npm i //可以不用 npm i仅仅是npm install的简写，安装的模块无法用npm uninstall删除，npm uninstall i才卸载掉
npm install //安装node模块 node_modules

npm start // 启动http服务

试下效果：

http://localhost:3000/

3、创建flutter web项目， 打包flutter web产物

flutter create -t app --project-name testwebapp //创建flutter 工程
cd testwebapp

flutter config --enable-web // 配置web
flutter create . // 创建web资源
flutter build web // 打包项目

4、拷贝flutter web产物，修改node server 服务器配置

4.1 拷贝flutter web产物到 node server

/Users/huchu/Desktop/testwebapp/node/server/myapp/public/web

image.png

4.2 删除express不要文件

因为express 创建的server是展示views包下的网页。 这里不需要。
删除/Users/huchu/Desktop/testwebapp/node/server/myapp/views下面的文件
error.pug
layout.pug
index.pug

4.3 修改app.js

注释掉

// view engine setup
// app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'pug');

修改根目录

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

5，启动node server 服务

cd /Users/huchu/Desktop/testwebapp/node/server/myapp
npm start

6，查看部署后的效果

http://localhost:3000/#/

image.png

参考资料 https://juejin.cn/post/6844904112329326606