Vue CLI 3 SPA в подпапках, Stati c HTML Страницы в Root - PullRequest
Новая
       7

Vue CLI 3 SPA в подпапках, Stati c HTML Страницы в Root

1 голос
/ 07 января 2020

Используя Vue CLI 3, как я могу создать проект, который содержит некоторые stati c html файлы в root каталога publi c и SPA внутри папки приложения?

Мне бы хотелось несколько файлов stati c html, включая индекс. html в root проекта. Я хочу, чтобы эти stati c HTML файлы использовались вне SPA для целей SEO.

Сейчас моя структура проекта выглядит следующим образом: 

.
├── README.md
├── babel.config.js
├── package.json
├── public
│   ├── app
│   │   └── index.html
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
├── vue.config.js
└── yarn.lock

Я пробовал много различные комбинации значений publicPath и indexPath в моем файле vue .config. js. Никто не достиг того, на что я надеюсь. Я бы хотел, чтобы пряжа служила для обслуживания как файлов stati c HTML, так и SPA локально для разработки. Что еще более важно, я хотел бы, чтобы файлы stati c HTML и SPA правильно связывались в папку dist, когда я запускаю yarn build . Мне не удалось достичь ни одной из этих целей.

С приведенной ниже конфигурацией файл public / index. html, который должен иметь статус c и который отображается только в /, обслуживается в обоих http://localhost: 8080 / и http://localhost: 8080 / app / . Интересно, что в http://localhost: 8080 / app / ресурсы js вводятся в ответ вместе с тем, что должно быть stati c HTML.

После запуска сборка пряжи с приведенной ниже конфигурацией. Мне остается файл /dist/app/index.html с индексом stati c. Код файла html без вставки javascript кода SPA с javascript введенным. Файл /dist/index.html имеет состояние c HTML Я ожидаю, но вводится все javascript, предназначенное для SPA. 

// vue.config.js
module.exports = {
    publicPath: '/app/',
    indexPath: 'index.html'
}

Как я могу настроить этот проект для поддержки stati c html файлов в проекте root и SPA в папке приложения?

1 Ответ

1 голос
/ 07 января 2020

Вы можете использовать функцию Vue CLI для создания многостраничных приложений и фактически иметь только одну страницу ... 

// vue.config.js
module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: "src/main.js",
      // the source template
      template: "public/app/index.html",
      // output as dist/app/index.html
      filename: "app/index.html",
      // when using title option,
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: "App Index Page",
      // chunks to include on this page, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ["chunk-vendors", "chunk-common", "index"]
    }
  }
};
...