Question

例如：

我有两个.vue文件a.vue，b.vue，

我希望生成多个页面，因此我需要两个入口点文件a.js，b.js

但是这两个.js文件只是在一个语句中有所不同：

import Vue from 'vue'
import App from './a.vue' // or import App from '.b.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

我如何重用入口点文件？

中文翻译：

例如用VUE写，a.vue，b.vue两个文件

多页打包的话就要分别为这两个文件各自写一个入口文件，例如a.js，b.js

但其实这两个入口文件除了引入的VUE文件不同，其他都相同

import vue from 'vue'
import App from 'a.vue' // 这句不同 import App from 'b.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

那么请问有什么办法可以共用一个入口文件呢？

Answer 1

使用动态导入。

如果您的条件是加载a.vue或b.vue，则可以将它们分块。您的入口点对于两者都是相同的比加载和初始化你需要的那个。

import Vue from 'vue'

const appPromise = condition ? import('./a.vue') : import('./b.vue');

appPromise.then(({ default: app }) => {
  new Vue({
    el: '#app',
    render: h => h(App)
  })
})

这样的东西。
Webpack会自动拆分它们，你只需加载你需要的那个。

Webpack：如何在多页面应用程序中重用入口点文件？

1 个答案: