前言
Electron-vue使用的单页面配置，由于项目中不可避免存在多个窗口，需要配置多个html地址，使用多页面入口，每个渲染进程窗口都是独立的，每个页面拥有自己的状态、视图。
调整webpack配置
1.新增muti-page.config.js文件
const glob = require('glob');
const path = require('path');
const PAGE_PATH = path.resolve(__dirname, '../src/renderer/page');
const HtmlWebpackPlugin = require('html-webpack-plugin');
exports.entries = function () {
/*用于匹配 pages 下一级文件夹中的 index.js 文件 */
var entryFiles = glob.sync(PAGE_PATH + '/*/main.js')
var map = {}
entryFiles.forEach((filePath) => {
/* 下述两句代码用于取出 pages 下一级文件夹的名称 */
var entryPath = path.dirname(filePath)
var filename = entryPath.substring(entryPath.lastIndexOf('\/') + 1)
/* 生成对应的键值对 */
map[filename] = filePath
})
return map
}
exports.htmlPlugin = function () {
let entryHtml = glob.sync(PAGE_PATH + '/*/index.ejs')
let arr = []
entryHtml.forEach((filePath) => {
var entryPath = path.dirname(filePath)
var filename = entryPath.substring(entryPath.lastIndexOf('\/') + 1)
let conf = {
template: filePath,
filename: filename + `/index.html`,
chunks: ['manifest', 'vendor', filename],
inject: true,
nodeModules: path.resolve(__dirname, '../node_modules'),
templateParameters(compilation, assets, options) {
return {
// compilation: compilation,
// webpack: compilation.getStats().toJson(),
// webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
}
}
}
if (process.env.NODE_ENV === 'production') {
let productionConfig = {
minify: {
removeComments: true, // 移除注释
collapseWhitespace: true, // 删除空白符和换行符
removeAttributeQuotes: true // 移除属性引号
},
chunksSortMode: 'dependency' // 对引入的chunk模块进行排序
}
conf = {...conf, ...productionConfig} //合并基础配置和生产环境专属配置
}
arr.push(new HtmlWebpackPlugin(conf))
})
return arr
}
2.修改webpack.renderer.config.js
const {entries, htmlPlugin} = require('./muti-page.config')
// 修改rendererConfig
let rendererConfig = {
// ... ...
entry: entries(),
// ... ...
plugins: [
new ExtractTextPlugin('[name].css'),
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: path.resolve(__dirname, '../src/index.ejs'),
// minify: {
// collapseWhitespace: true,
// removeAttributeQuotes: true,
// removeComments: true
// },
// nodeModules: process.env.NODE_ENV !== 'production'
// ? path.resolve(__dirname, '../node_modules')
// : false
// }),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
].concat(htmlPlugin()),
output: {
filename: '[name]/index.js',
// ... ...
},
// ... ...
}
3.调整dev-runner.js支持多页面的热重载
function startRenderer () {
return new Promise((resolve, reject) => {
// rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer)
// config Multi page hot reload
for (let key in rendererConfig.entry) {
rendererConfig.entry[key] = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry[key])
}
// ... ...
})
}
更改目录结构
1.新增page文件夹，剥离组件、工具等
image.png
2.每个文件目录需要提供两个文件
index.ejs、main.js
image.png
index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="referrer" content="no-referrer"/>
<% if (htmlWebpackPlugin.options.nodeModules) { %>
<!-- Add `node_modules/` to global paths so `require` works properly in development -->
<script>
require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
</script>
<% } %>
</head>
<body>
<div id="app"></div>
<!-- Set `__static` path to static files in production -->
<script>
if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
</script>
<!-- webpack builds are automatically injected -->
</body>
</html>
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
// if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.config.productionTip = false
Vue.prototype.eventBus = new Vue()
Vue.prototype.$toast = function (msg) {
console.log(msg)
}
/* eslint-disabodele no-new */
new Vue({
components: { App },
router,
store,
template: '<App/>'
}).$mount('#app')
修改静态文件路径
由于目录往下提了一级，原先./static 的引用方式调整为../static 避免打包后静态文件引用失败的问题
窗口创建目录调整
const winUrl = process.env.NODE_ENV === 'development'
? `http://localhost:9080/xxx`
: `file://${__dirname}/xxx/index.html`
网友评论