Question

我正在使用Vue.js库启动项目。项目包含三个应用程序：

b2c（http://somedomain.com）
admin（http://admin.somedomain.com）
b2c和admin（商店，组件，模型等）之间的共享组件

我应该如何设置项目结构和webpack配置以防止使用共享组件进行代码重复。此外，我想使用npm run build来生成build \ admin和build \ b2c并保持构建/发布简单（没有像nuget等其他存储库）。

感谢您提供任何参考资料或模板。

Answer 1

以下是使用ES6模块的示例（您可以使用webpack的模块，但我更喜欢这种方式）。例如，你有这个结构

/assets
/-js
/--components
/---shared
/---admin
/---b2c
/--directives
/--stores
/--models
/b2c.js
/admin.js

因此，在您的b2c.js中，您需要以这种方式使用它。

import Vue from 'Vue';

import component from './components/shared/SomeComponent.vue';

/*or var component = require('./components/shared/SomeComponent.vue'); if you want to use webpack here*/

import b2cOnly   from './components/b2c/SomeComponent.vue';

let app = new Vue({
  el: '#app',
  components: {component, b2cOnly}
});

类似admin.js

import Vue from 'Vue';

import component from './components/shared/SomeComponent.vue';

import adminOnly   from './components/admin/SomeComponent.vue';

let app = new Vue({
  el: '#app',
  components: {component, adminOnly}
});

然后您可以轻松地将其与vue-loader捆绑在一起（或者如果您使用browserify，则为vueify，例如我https://github.com/vuejs/vueify）

http://vue-loader.vuejs.org/en/start/tutorial.html

以下是来自文档

的webpack.config.js示例

// webpack.config.js
module.exports = {
  // other options ...
  module: {
loaders: [
  {
    // use vue-loader for *.vue files
    test: /\.vue$/,
    loader: 'vue'
  },
  {
    // use babel-loader for *.js files
    test: /\.js$/,
    loader: 'babel',
    // important: exclude files in node_modules
    // otherwise it's going to be really slow!
    exclude: /node_modules/
  }
]
},
  // if you are using babel-loader directly then
  // the babel config block becomes required.
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  }
}

然后，您可以在项目的某处包含您编译的admin.js和b2c.js。

Vue.js具有共享组件的两个SPA应用程序的项目结构

1 个答案: