由于 weex 默认的 webpack 配置,会导致在 src 文件夹下的每一个. vue 在 temp 文件夹下生成对应的一个. js 文件,该 js 文件有一段这样的代码
- contents += 'var App = require(\'' + relativePath + '\')\n';
- contents += 'App.el = \'#root\'\n';
- contents += 'new Vue(App)\n';
会导致多个 vue 对象挂载同一个 id(#root),导致整个页面就只有一个 vue 对象,无法像写 spa 项目一样写 weex 项目,因此在这里对 webpack.cofig 进行改造(添加一个 entry.js 入口 js 文件,和一个最外层的 App.vue 承载路由渲染)
默认的 webpack.config.js 文件中,有两个方法
- const getEntryFileContent = (entryPath, vueFilePath) = >{
- let relativePath = pathTo.relative(pathTo.join(entryPath, '../'), vueFilePath);
- let contents = '';
- /**
- * The plugin's logic currently only supports the .we version
- * which will be supported later in .vue
- */
- if (hasPluginInstalled) {
- const plugindir = pathTo.resolve('./web/plugin.js');
- contents = 'require(\'' + plugindir + '\') \n';
- }
- if (isWin) {
- relativePath = relativePath.replace(/\\/g, '\\\\');
- }
- contents += 'var App = require(\'' + relativePath + '\')\n';
- contents += 'App.el = \'#root\'\n';
- contents += 'new Vue(App)\n';
- return contents;
- }
- const walk = (dir) = >{
- dir = dir || '.';
- const directory = pathTo.join(__dirname, 'src', dir);
- fs.readdirSync(directory).forEach((file) = >{
- const fullpath = pathTo.join(directory, file);
- const stat = fs.statSync(fullpath);
- const extname = pathTo.extname(fullpath);
- if (stat.isFile() && extname === '.vue' || extname === '.we') {
- if (!fileType) {
- fileType = extname;
- }
- if (fileType && extname !== fileType) {
- console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!');
- }
- const name = pathTo.join(dir, pathTo.basename(file, extname));
- if (extname === '.vue') {
- const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js');
- fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath));
- entry[name] = pathTo.join(__dirname, entryFile) + '?entry=true';
- }
- weexEntry[name] = fullpath + '?entry=true';
- } else if (stat.isDirectory() && file !== 'build' && file !== 'include') {
- const subdir = pathTo.join(dir, file);
- walk(subdir);
- }
- });
- }
这两个方法,是遍历 src 中的. vue 文件,然后在 temp 文件夹中生成一个相对应的 JS 文件
- const entry = {index: pathTo.resolve('src', 'entry.js')};
- const weexEntry = {index: pathTo.resolve('src', 'entry.js')};
- function walk(dir) {
- dir = dir || '.';
- const directory = pathTo.join(__dirname, 'src', dir);
- fs.readdirSync(directory).forEach((file) = >{
- const fullpath = pathTo.join(directory, file);
- const stat = fs.statSync(fullpath);
- const extname = pathTo.extname(fullpath);
- const basename = pathTo.basename(fullpath);
- console.log("配置", file, fullpath, stat, extname, basename, ) if (stat.isFile() && extname === '.vue' && basename != 'App.vue') {
- if (!fileType) {
- fileType = extname;
- }
- if (fileType && extname !== fileType) {
- console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!');
- }
- const name = pathTo.join(dir, pathTo.basename(file, extname));
- if (extname === '.vue') {
- const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js');
- fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath));
- entry[name] = pathTo.join(__dirname, entryFile) + '?entry=true';
- }
- weexEntry[name] = fullpath + '?entry=true';
- } else if (stat.isDirectory() && ['build', 'include', 'assets', 'filters', 'mixins'].indexOf(file) == -1) {
- const subdir = pathTo.join(dir, file);
- walk(subdir);
- }
- });
- }
来源: https://juejin.im/post/5a5223dc6fb9a01cb256c308