在本地和沙盒外部署 Vue 应用程序答案

【问题标题】：Deploying Vue App Locally and Out of Sandbox在本地和沙盒外部署 Vue 应用程序
【发布时间】：2020-05-17 23:43:38
【问题描述】：

有没有什么方法可以在本地部署 VueJS 应用而不受浏览器的限制？

我希望用户能够从命令行调用应用程序，例如app_name --port 6000，然后能够从http://127.0.0.1:6000 或他们选择的任何其他端口加载应用程序。重要的是，Vue App 必须能够导入和使用原生 NodeJS 模块，例如 fs 和 zeromq。

【问题讨论】：

请查看post
@BoussadjraBrahim 感谢您的评论，但链接的建议是使用辅助 ExpressJS 进程。 VueJS 无法访问原生模块，API 接口需要介于两者之间。
Vuejs 或任何其他前端框架，只要它们在浏览器环境中运行，就无法直接访问硬件。不过，您可以使用 Electron 将 Vuejs 应用程序包装到桌面应用程序中。它还为您提供了一个专门用于访问硬件的单独进程。
@evolon 我使用的是 Electron，但它附带了大量我不需要的东西。
那么你可能应该启动一个简单的节点服务器并通过http从浏览器发出请求。

标签： javascript node.js vue.js zeromq

【解决方案1】：

Vuejs 代码必须在您无法访问硬件的浏览器环境中运行。所以基本上你有三种选择来实现这一点：

1。使用电子

Electron 为您提供了一个 chromium 实例，您的 UI (Vuejs) 代码可以在其中运行，并提供一个单独的进程，您可以在其中使用 nodejs 访问您的硬件。

2。用node创建一个简单的http服务器

在这种情况下，您需要使用 nodejs 创建一个服务器。例如，您可以像这样创建一个名为 server.js 的文件：

const http = require('http');
const fs = require('fs')

http.createServer((req, res) => {

   // Do something with fs
   const data = fs.readFileSync('path/to/some/file');

   // return back the data with http
   http.writeHead(200, {ContentType: 'text/plain'})
   http.write(data);
}).listen(8000)

然后使用 http 获取 Vuejs 应用程序中的数据，如下所示：

export default {
  data () {
    return {
      myData: null
    }
  },
  methods: {
    onSomeAction () {
      const {data} = await axios.get('localhost:8000')
      this.myData = data;
    }
  }
}

现在在您的 package.json 中，您可以在调用 npm serve 时将其运行：

...

"scripts": {

  ...

  "serve": "node server.js & vue-cli-service serve"
}

3。使用 Nuxt

如果您需要在渲染之前对硬件进行一次操作，您可以在渲染 Vuejs 应用并将其移交给浏览器之前使用 Nuxt 访问硬件。

【讨论】：