详解Weex默认webpack.config.js改造
本文详解Weex默认webpack配置中导致多Vue实例挂载同一ID的问题。通过移除自动生成的entry逻辑，添加统一的entry.js入口文件和App.vue组件，实现类似传统SPA的路由渲染，解决页面只有一个Vue对象的限制。
本文介绍了Weex默认webpack.config.js的改造方法，具体步骤如下。
Weex默认配置存在的问题
需要解决的问题：
由于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.config.js进行改造，具体包括添加一个entry.js入口JS文件，以及一个最外层的App.vue用于承载路由渲染。
在默认的webpack.config.js文件中，主要涉及两个方法：
第一个是getEntryFileContent。
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;
}
第二个是walk。
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文件。
如果我们采用传统的Vue开发模式，需要一个入口.js文件，就需要对这个配置进行改造。
Webpack配置改造步骤
具体操作包括添加入口文件配置。
const entry = {index: pathTo.resolve('src', 'entry.js')};
const weexEntry = {index: pathTo.resolve('src', 'entry.js')};同时需要删除或更改原有配置（当然，第三种方法还可以把.vue组件不写在src内）。
具体删除步骤如下：
- 删除getEntryFileContent函数。
- 删除walk函数。
- 删除walk()函数的调用。
修改配置（代码参考github上高仿网易严选项目）。
注意看最外层的if判断，添加了额外条件：如果是文件且后缀是.vue且不是App.vue的，则进入判断；否则，判断是不是page文件夹，如果不是，则结束。
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);
}
});
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
生产环境怎么自动移除或禁用 Mock.js
2026-11-05 09:26:52
JS文件报MIME type mismatch错误导致加载失败的修复方法
2026-11-04 11:41:15
Auto.js下载速度慢或链接失效怎么办？国内镜像与备用方案
2026-11-03 15:46:28
Vite项目JS压缩配置指南：提升构建速度与体积优化
2026-11-03 08:53:48
JS压缩工具选型：Terser、esbuild与UglifyJS对比
2026-11-03 08:28:21
