项目初始化
# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev
启动项目
npm run dev
遇到的问题 1- Webpack ReferenceError: process is not defined
启动项目遇到Webpack ReferenceError: process is not defined错误
命令行报错：
electron页面展示信息
原因
原因：
- webpack热更新时编译出错，HtmlWebpackPlugin插件配置有误
- 用不同的电脑测试，结果有些电脑是会报错，但是有些不会报错，电脑配置与环境相关（具体暂不知道哪一块环境问题，有待解决）
解决原理
解决原理：给HtmlWebpackPlugin插件配置templateParameters（允许覆盖模板中使用的参数）
templateParameters
{Boolean|Object|Function}允许覆盖模板中使用的参数
更多html-webpack-plugin配置可以参考这篇文章html-webpack-plugin用法总结
解决方案
- 进入
.electron-vue\webpack.renderer.config.js文件找到HtmlWebpackPlugin配置，添加如下配置
//插入--------------------------------------------
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
//插入完毕--------------------------------------------
- 重新启动项目（npm run dev）
遇到的问题 2- [Vue warn]: Error in beforeCreate hook: "RangeError: Maximum call stack size exceeded"
原因
vue-router报错，应该是路由配置出问题了，或者跳转调用路由的时候出现死循环，RangeError: Maximum call stack size exceeded 超出最大调用堆栈大小 出现死循环
解决方案
创建模板后 添加路由
