Встроенный Vue SPA не работает при использовании "publicPath" - PullRequest
0 голосов
/ 04 марта 2020

Я установил publi c путь в vue.config.js, как

module.exports = {
  publicPath: '/subpath'
};

, он прекрасно работает, когда я запускаю сервер devlopment с npm run serve (vue-cli-service serve). Приложение становится доступным на localhost:8080/subpath, что именно то, что я хочу. Он использует vue-router и, по крайней мере, в разработке кажется, что он прекрасно работает с /subpath как publicPath.

Проблема

Я использую Express для обслуживания файлов приложения. При запуске npm run build приложение будет скомпилировано и сохранено в папке ./dist (папка вывода по умолчанию).

// simplified server.js
app.use(express.static(path.join(__dirname, '/dist')));

app.get('/', (req, res, next) => {
  res.sendfile('./dist/index.html');
});

После запуска моего express сервера и посещения моего браузера в localhost:<port>/subpath или localhost:<port> он не может найти необходимые файлы.

// EXAMPLE FROM BROWSER CONSOLE
GET http://localhost:5050/subpath/js/app.6c6daa90.js net::ERR_ABORTED 404 (Not Found)

Что как-то выглядит очевидным для меня, но Я не знаю, как правильно настроить сервер express для соблюдения настройки publicPath . Может быть, есть другой подход?

Попытка # 1

Я сделал небольшое изменение в моем express сервере. js

// app.use(express.static(path.join(__dirname, '/dist')));

/* NEW */
app.use('/subpath', express.static(path.join(__dirname, '/dist')));

Таким образом, это должно обслуживать файлы stati c из папки /dist по запросу /subpath/app.js

Результат

Из консоли браузера при запросе localhost:<port>/subpath или localhost:<port>

Refused to load the font 'data:application/font-woff2;base64,<omitted>' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

Refused to load the image 'http://localhost:5050/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

1 Ответ

0 голосов
/ 04 марта 2020

Я играл с express .stati c, и эта комбинация, кажется, работает для меня

const path = require('path');
const express = require('express');
const history = require('connect-history-api-fallback');
const app     = express();

app.use(history());
app.use(express.static(path.join(__dirname, '/dist')));
app.use('/subpath', express.static(path.join(__dirname, '/dist')));

const listener = app.listen(5050, () => {
  console.log(`Open http://localhost:${port} in your browser`);
});

Sidenote: добавление connect-history-api-fallback не требовалось для решения начальной проблемы, но требуется для vue-router для правильной работы в режиме истории.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...