在没有 android studio 的情况下在本地运行 Flutter Web 应用程序答案

【问题标题】：Running flutter web app locally without android studio在没有 android studio 的情况下在本地运行 Flutter Web 应用程序
【发布时间】：2021-03-10 04:22:45
【问题描述】：

我有一个使用 Firebase 的云 Firestore 的颤振应用。我已经完成了网络构建并通过 Android Studio 在 Chrome 上运行它运行良好。我想将我的网络应用程序进度分享给我的客户，但不想托管它（因为它还没有完成）。因此，我想找到一种在本地运行它的方法，就像你可以使用 Android Studio 一样，但不需要安装 Android Studio（希望也不需要安装颤振），这样我就可以将构建文件发送到我的客户，他们可以在他们的机器上运行它（使用脚本在本地启动 Web 服务器并运行 Web 应用程序）。

我已经尝试了包含在 web 构建文件夹中的以下脚本（index.html 所在的位置）

from BaseHTTPServer import BaseHTTPRequestHandler, HTTPServer
from httplib import HTTPResponse
from os import curdir,sep

#Create a index.html aside the code
#Run: python server.py
#After run, try http://localhost:8080/

class RequestHandler(BaseHTTPRequestHandler):
    def do_GET(self):
        if self.path == '/':
            self.path  = '/index.html'
        try:
            sendReply = False
            if self.path.endswith(".html"):
                mimeType = 'text/html'
                sendReply = True
            if sendReply == True:
                f = open(curdir + sep + self.path)
                self.send_response(200)
                self.send_header('Content-type', mimeType)
                self.end_headers()
                self.wfile.write(f.read())
                f.close()
            return
        except IOError:
            self.send_error(404,'File not found!')


def run():
    print('http server is starting...')
    #by default http server port is 80
    server_address = ('127.0.0.1', 8080)
    httpd = HTTPServer(server_address, RequestHandler)
    try:
        print 'http server is running...'
        httpd.serve_forever()
    except KeyboardInterrupt:
        httpd.socket.close()

if __name__ == '__main__':
    run()

但在 Chrome 上打开 http://localhost:8000 时，我得到一个空白页面，控制台显示错误：

Failed to load resource: net::ERR_EMPTY_RESPONSE main.dart.js:1
Failed to load resource: net::ERR_EMPTY_RESPONSE manifest.json:1 
Failed to load resource: net::ERR_EMPTY_RESPONSE :8080/favicon.png:1

我还通过运行 ws --spa index.html 尝试了 NPM local-web-server，但只得到了 ERR_EMPTY_RESPONSE 响应。

这是我在运行flutter build web 后在我的build/web 中的内容：

如何创建一个本地服务器，让我可以在本地托管我的 Web 应用程序并在本地运行它，而无需在 Internet 上托管它？

【问题讨论】：

你为什么需要一个服务器来做到这一点？打开 index.html 就足够了？或者查看这个快速教程expressjs.com/en/starter/static-files.html（虽然不是python）
不，只是打开 index.html 会抛出错误Access to internal resource at 'file:///manifest.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
如果你认为 express 是一个解决方案，你介意写下如何实现它以使我的 Flutter Web 应用运行使用它吗？
如果你对 dart 没问题，看看 HttpServer 类

标签： flutter dart flutter-web

【解决方案1】：

正如你在评论中提到的那样。

使用以下内容创建文件app.js：

const express = require('express')
const app = express()
const port = 8000


app.get('/', (req, res) => {
    console.log('getting request')
    res.sendFile('website/y.html',{root:__dirname})
  })

app.use(express.static(__dirname + '/website'))

app.use((req, res)=>{
    res.redirect('/')
})

app.listen(port, () => {
    console.log(`app listening at http://localhost:${port}`)
  })

这里我的网站文件存在于website 文件夹中，我的入口点是y.html。设置静态文件目录（您的网站页面），然后为根请求提供 .html

示例项目：https://github.com/ondbyte/website

最后，运行它打开终端并移动到根文件夹。然后做

npm init
npm install express --no-save
node app.js

【讨论】：