electron-vue初始化项目及报错处理
Electron是一个使用JavaScript,HTML和CSS等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。
初始化项目
# 如果你没有vue-cli的话需要全局安装
npm install -g vue-cli
# 然后使用vue-cli来安装electron-vue的模板
vue init simulatedgreg/electron-vue my-project
# 安装依赖
cd my-project
npm install # or yarn
# 进入开发模式
npm run dev # or yarn run dev
错误处理
electron-vue ReferenceError process is not defined
在使用electron-vue时候,运行npm run dev
,会出现下面的错误electron-vue ReferenceError process is not defined
解决方法:
1、找到根目录下的.electron-vue目录
2、找到该目录下的webpack.renderer.config.js文件,找到这段代码:
new HtmlWebpackPlugin({
// ...
})
3、用下面的代码将这段代码替换:
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
nodeModules: process.env.NODE_ENV !== 'production'
? path.resolve(__dirname, '../node_modules')
: false
}),
4、再找到该目录下的webpack.web.config.js文件,找到这段代码:
new HtmlWebpackPlugin({
// ...
})
5、用下面的代码将这段代码替换:
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
nodeModules: false
}),
6、最后重新编译就解决了(注意两个文件替换的内容是不一样的)
Unresolved node modules: vue
解决方法:
先删除项目下的node_modules,再使用npm或yarn安装。
npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
npm install node-sass
yarn install
最新评论