0

Vue的多页面应用程序很容易构建，可以通过编辑vue.config.js文件来构建。但是昨天下午，当我试图用一些 ui 结构Vuetify.js而不是 pure构建一个多页面 Web 应用程序时vue.js，发生了一件奇怪的事情：

它是一个两页应用程序：主页和注册页面。当我运行npm run build时，结果dist文件夹不包含.html第二页的文件。

所以我进行了一些测试：这是正在发生的事情：

  1. 如果主页的文件名是index.htmlinvue.config.js而第二页的文件名是second.html，那么一切都很好。

  2. 如果主页的文件名是index.htmlinvue.config.js而第二页的文件名是/second/second.htmlor second/index.html。然后，second不会创建名为的文件夹，其中的文件也不会创建/second/second.html。

以前有没有人遇到过类似的问题，非常感谢您的帮助。

另外，我注意到当它只是 pure 时vue.js，图像等资产将被放入dist. 但是vuetify.js添加到项目中后，只能出现在distand jsandcss中fonts的文件夹，这些图片资源会存放在文件夹下dist。不知道是不是最新vue.js版本的特性，还是配置vuetify.js. 谢谢您的帮助。

我发现第二页的所有样式表和javascript代码都是在文件夹中生成的css，js唯一缺少的是html模板。

在构建应用程序期间，没有关于无法创建文件夹的错误。它所打印的只是资产大小的警告，因为我没有按部分导入资产，打印件是：

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  home (1.54 MiB)
      css/chunk-vendors.c6dfe063.css
      js/chunk-vendors.216b9b9d.js
      css/home.429de16e.css
      js/home.635f35e5.js
  signup (1.53 MiB)
      css/chunk-vendors.c6dfe063.css
      js/chunk-vendors.216b9b9d.js
      css/signup.d6876e84.css
      js/signup.77b83ca7.js

主页是索引文件，第二页是指注册页面。

module.exports = {
  pages: {
    home: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'home'
    },
    signup: {
      entry: 'src/pages/signup/main.js',
      template: 'public/signup.html',
      filename: '/signup/index.html',
      title: 'signup page'
    }
  },
  transpileDependencies: [
    'vuetify'
  ]
}

如您所见，我将所有 html 模板都放在了public文件夹中。我希望所有构建的 html 文件都将在某个文件夹下命名为 index.html，这样我就不会从我的小项目的 url 中看到 html。

4

0 回答 0