使用Vue CLI 3，我如何创建一个项目，该项目在公共目录的根目录中包含一些静态html文件，而在app文件夹中包含一个SPA？
我想要几个静态html文件，包括位于项目根目录的index.html。我希望这些静态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
我在vue.config.js文件中尝试了publicPath和indexPath值的许多不同组合。没有一个能达到我的期望。我希望yarn可以在本地提供静态HTML文件和SPA进行开发。更重要的是，当我运行yarn build时，我希望将静态HTML文件和SPA正确捆绑到dist文件夹中。我没有达到任何一个目标。
使用以下配置，在http：// localhost：8080 /和http：// localhost：8080 / app /处都提供了public / index.html文件，该文件本来是静态的并且仅显示在/上。有趣的是，在http：// localhost：8080 / app /上，js资源与意味着是静态HTML的注入在一起。
在使用下面的配置运行yarn build之后，我剩下一个/dist/app/index.html文件，该文件具有未添加javascript的静态index.html文件代码，而不是具有javascript的SPA代码。/dist/index.html文件具有我期望的静态HTML，但是注入了所有用于SPA的javascript。
// vue.config.js
module.exports = {
publicPath: '/app/',
indexPath: 'index.html'
}
如何配置该项目以在项目根目录支持静态html文件，并在app文件夹中支持SPA？
您可以利用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"]
}
}
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句