Android三大巨头，手把手教你用Flutter搭建个人网站？so-easy

Posted 2022-01-13 jkjk322

今日科技快讯

据外媒报道，在世界各地严格执行“封城”措施，促使远程工作和学习激增后，全球对个人电脑（PC）的需求在2020年第一季度飙升。但这场危机也导致生产和物流问题严重延误，最终导致全球PC出货量同比下降8%，苹果Mac更是狂降21%。

作者简介

本篇文章来自i校长的投稿，分享了他对用Flutter 搭建个人网站的过程，相信会对大家有所帮助！同时也感谢作者贡献的精彩文章。

i校长的博客地址：

https://www.jianshu.com/u/77699cd41b28

简述

曾几何时，你有没有一个搭个人网站的冲动，我这个想法在我第一次开始写博客就有了，可就是没有搭起来，直到我看到flutter有了web支持，我就在想，是时候了，必须且一定要做，于是乎我就搭建了现在的网站ibaozi.cn，代码开源至

https://github.com/ibaozi-cn/ibaozi

而这次我要做的并不是基于这个网站开发，我再次申请了一个新域名jetpack.net.cn，读过我之前的博客可能直到，我做了一个android Jetpack模版项目在线生成工具，我申请这个就是为了将Android Jetpack整合进来，提供一个好记的域名。

当然我还有另一项计划，就是做一个Flutter 生态的Jetpack，这次博客就是计划的第一步，完全开源给大家，让读我博客的同学们，跟我一起搭建一个网站，顺便学习Flutter技术，好了不多说了，接下来，让我们看看如何搭建这个网站。

环境要求

Flutter

需要切换beta版本来支持web开发。环境搭建跳至之前博客：Flutter系列之环境搭建。

https://www.jianshu.com/p/ab2bbcdc54d0

Node

下载跳至：下载| Node.js。

https://nodejs.org/zh-cn/download/

环境配置：Node.js 安装配置。

https://www.runoob.com/nodejs/nodejs-install-setup.html

脚手架：Express 生成器。

https://expressjs.com/zh-cn/starter/generator.html

具体操作步骤请往下看。

Flutter 项目创建

假装你已经搭建好环境。

step 1

打开终端，切换Flutter 分支。

flutter channel beta

flutter upgrade

flutter config --enable-web

flutter devices

Chrome     • chrome     • web-javascript • Google Chrome 78.0.3904.108

一行一行执行命令，最后看到Chrome，祝贺你成功了。

step 2

打开Android Studio。

项目名字、描述简单修改一下，next下一步。

修改一下包名，然后Finish，需要等待一会儿。

![](https://upload-imag

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

es.jianshu.io/upload_images/22459598-56d17ef00f374722?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

项目创建成功了。这里就到这，后期博客慢慢介绍每次开发的细节。

Node 项目创建

我们直接打开Flutter项目的Terminal。

mkdir node

mkdir server

cd node/server

进入server目录，现在你的node环境应该也可以了吧，好开始用Express 生成器生成项目。

npm install express-generator -g //安装好了略过

express --view=pug myapp

修改myapp为你自己的项目名。执行完你会看到。

接下来：

cd myapp
npm i
npm start

浏览器试下http://localhost:3000看到如下就ok了。

开始项目关联

step 1

在Flutter项目中执行。

flutter build web

构建web包，最终会在build文件夹下生成web包，web包下就是网站的相关文件。

step 2

copy web包下的文件到node项目的public文件下。

我创建了一个public_flutter_web，为了是以后文件区分，也建议你做一样的操作。

step 3

改造express，因为默认express是展示 views包下的网页的，而且默认不是html实现。将下图中文件全部删除即可。

[外链图片转存中…(img-PAG0wIC5-1640322311103)]

我创建了一个public_flutter_web，为了是以后文件区分，也建议你做一样的操作。

step 3

改造express，因为默认express是展示 views包下的网页的，而且默认不是html实现。将下图中文件全部删除即可。