webpack 使用模板文件而不是index.html

n7taea2i  于 7个月前  发布在  Webpack
关注(0)|答案(2)|浏览(96)

我正在使用vue-service(webpack,还没有vite)运行一个Vue 3应用程序。
因为我想在单独的应用程序中重用一些代码,所以我需要创建一个单独的HTML tempate文件(例如module.html)来挂载应用程序。
然而,似乎vue-config和/或webpack配置不允许我指定一个不同的html文件作为模板,唯一有效的文件名是index.html
我如何告诉我的应用程序使用vue.config.js文件或vue-cli-service命令行使用不同的html文件作为模板注入应用程序?
这是我已经尝试过的:

1)设置indexPath属性

// in vue.config.js

defineConfig({
  indexpath: "module.html"
  //...
})

字符串
结果:没有变化,index.html仍然用于呈现页面。

2)使用historyApiFallback

// in vue.config.js

defineConfig({
  devServer: {
    historyApiFallback: {
      index: "module.html",
    }
    // ...
  }
  // ...
})


结果:没有变化,index.html仍然用于呈现页面。

3)使用pages属性

使用pages属性应该允许我将html-webpack-plugin配置为使用不同的文件。

// in vue.config.js

defineConfig({
  pages: {
    index: {
      entry: "src/module.js",
      template: "module.html",
    }
  }
  // ...
})


结果:这将在控制台中创建以下错误:
Conflict: Multiple assets emit different content to the same filename index.html
这让我想到,在pages之外一定有一种方法可以设置一个不同的文件名,应用程序试图使用这个文件名。

p4tfgftt

p4tfgftt1#

如果我错了请纠正我,你正在尝试为你的Vue应用程序创建多个布局,对吗?
如果是这种情况,您应该使用vue-router嵌套路由来创建实际布局。
您可以在这里查看更多详细信息https://stackblitz.com/edit/vue-t1uatq

fumotvh3

fumotvh32#

你是否尝试给予绝对路径到您的html文件在这里
1.设置indexPath属性
//在vue.js.js

defineConfig({
  indexpath: "module.html"
  //...
})

字符串

相关问题