一、electron-vue 条件
- 需要使用 node@^7 或更高版(除老项目外,对大多数人来说不是问题)
- 适用于 vue-cli@2.x 创建项目(不兼容 vue-cli@3.x 或以上版本)
- 推荐用yarn安装依赖,避免后期运行打包错误
二、项目搭建
yarn global add vue-cli
vue init simulatedgreg/electron-vue electron-project
Application Name (my-project)
Application Id (com.example.yourapp)
Application Version (0.0.1)
Project description (An electron-vue project)
Use Sass / Scss? (Y/n)
? Select which Vue plugins to install (Press <space> to select, <a> to toggle al
l, <i> to invert selection)
❯◉ axios
◉ vue-electron
◉ vue-router
◉ vuex
◉ vuex-electron
? Use linting with ESLint? (Y/n)
? Which ESLint config would you like to use? (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript)
none (configure it yourself)
? Set up unit testing with Karma + Mocha? (Y/n)
? Set up end-to-end testing with Spectron + Mocha? (Y/n)
? What build tool would you like to use? (Use arrow keys)
❯ electron-builder (https://github.com/electron-userland/electron-builder)
electron-packager (https://github.com/electron-userland/electron-packager)
? author (Ryan Zhong <hi@bluesdream.com>)
三、项目运行
cd electron-project
yarn install
yarn run dev
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({filename: 'styles.css'}),
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
}),
new webpack.DefinePlugin({
'process.env.IS_WEB': 'true'
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
],
yarn run build
若打包后报错找不到文件
1、在package.json中找到build下加入asar:false