Развертывание Vue приложения локально и из песочницы - PullRequest
Новая
       7

Развертывание Vue приложения локально и из песочницы

1 голос
/ 01 февраля 2020

Есть ли способ развернуть приложение VueJS локально, не ограничивая его браузером?

Я хочу, чтобы пользователь мог вызывать приложение из командной строки, например app_name --port 6000 и затем сможете загрузить приложение с http://127.0.0.1:6000 или с любого другого порта, который они выбрали. Важно то, что приложение Vue должно иметь возможность импортировать и использовать собственные модули NodeJS, такие как fs и zeromq.

1 Ответ

1 голос
/ 02 февраля 2020

Vuejs код должен выполняться в среде браузера, в которой у вас нет доступа к вашему оборудованию. Таким образом, в основном у вас есть три варианта для достижения этой цели:

1. Использование Electron

Electron предоставляет вам экземпляр хрома, в котором может выполняться код вашего пользовательского интерфейса (Vuejs), и отдельный процесс, в котором вы можете получить доступ к своему оборудованию с помощью nodejs.

. 2. Создайте простой 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)

и получить данные в вашем приложении Vuejs с http следующим образом: 

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

В случае, если вам нужно что-то сделать с вашим оборудованием ОДИН РАЗ, и ДО ПЕРЕД рендерингом вы можете использовать Nuxt для доступа к оборудованию перед рендерингом приложения Vuejs и передачей его ваш браузер.

...