У меня есть приложение vue-cli
, пытающееся запустить его в Laravel Homestead.
Что у меня есть :
Мой hosts
на хост-машине:
127.0.0.1 localhost
127.0.1.1 PC
192.168.2.10 myvueapp.local
hosts
внутри ВМ:
127.0.0.1 localhost
127.0.0.1 myvueapp.local
127.0.1.1 homestead homestead
Бродячая версия: 2.2.4, Усадьба: v8.3.2, vue --version
: 3.7.0
npm run serve
выполняется без проблем внутри ВМ, но я получаю
К сожалению, myvueapp не работает должным образом без включенного JavaScript.Пожалуйста, включите его, чтобы продолжить.
в качестве тела ответа на запрос:
//response headers
Request URL: https://myvueapp.local/
Request Method: GET
Status Code: 200
Remote Address: 192.168.2.10:443
Referrer Policy: no-referrer-when-downgrade
Страница браузера пуста.
Также есть один запрос favicon
:
Request URL: https://myvueapp.local/%3C%=%20BASE_URL%20%%3Efavicon.ico
Request Method: GET
Status Code: 400 Bad Request
Remote Address: 192.168.2.10:443
Каким-то образом BASE_URL
не компилируется в index.html
:
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
My vue.config.js
:
module.exports = {
devServer: {
host: 'myvueapp.local',
https: true
}
}
Homestead.yaml
:
ip: "192.168.2.10"
#...
sites:
- map: myvueapp.local
to: /home/vagrant/path/to/myvueapp.local/public
#...
ports:
- send: 8080
to: 80
Порт, на котором обслуживается Vue (внутри VM, 8080), прослушивает.
lsof -i :8080
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
node 3022 vagrant 22u IPv4 31440 0t0 TCP localhost:http-alt (LISTEN)
Конфигурация Nginx:
server {
listen 80;
listen 443 ssl http2;
server_name .myvueapp.local;
root "/path/to/myvueapp.local/public";
index index.html index.htm index.php;
charset utf-8;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
PS Он работает нормально, когдаЯ работаю с моего хост-компьютера.
То, что я пробовал :
изменение host
module.exports = {
devServer: {
host: '0.0.0.0', //<-- here
https: true
}
}
, не помогло.
Редактирование # 1
Я перешел немного дальше, эта конфигурация Nginx теперь позволяет мне получать доступ к приложению Vue, обслуживаемому внутри ВМ, с использованием хостамашина:
location / {
try_files $uri $uri/ /index.html =404;
proxy_pass http://localhost:8080; #<-- this might be the output from npm run serve, without last slash
# App running at:
# - Local: http://localhost:8080/
# ^^^^^^^^^^^^^^^^^^^^^
}
Но есть проблема: горячая перезагрузка не работает.