javascript - 在本地和沙盒外部署 Vue 应用程序

Question

有没有办法在本地部署 VueJS 应用而不受浏览器的限制？

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

Answer 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 中，您可以在调用 npmserve 时将其运行:

...

"scripts": {

  ...

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

3。使用 Nuxt

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