electron-vue 偶尔会使用到一些外部文件, 这些文件不需要经过 vue 打包, 仅仅是一些静态文件, 一般来说我们将他们放在 static 文件夹下, 但是经过 electron 打包之后, 发现会报错, 或者打包之后引不到这些文件. 搜索关键词之后得到的解释也寥寥无几, 没办法只有硬着头皮上.
最开始我在 index.ejs 文件中直接引入 JS 文件, 打包之后发现引入失败
<script src="../static/js/xxx.js>"></script>
问题在哪呢? 实际上 electron 打包之后路径发生了改变, 网上有文章指出, 在打包之后的 build/win-unpacked 文件夹下复制粘贴 static 就可以解决问题, 但是我认为这种方法并不明智, 打包为安装包不久全炸了....
随后从搜索中得知, electron 提供了一个全局变量__static, 这个变量就是我们需要的路径地址, 同时在 index.ejs 文件中我们也发现了__static 的身影.
- <% if (!process.browser) { %>
- <script>
- if (process.env.NODE_ENV !== 'development') Windows.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
- </script>
- <% } %>
首先, 这段代码有点奇怪, 他有点像 PHP 加 JS 的杂合体, 这个玩意儿叫 ejs, 是个模板工具, 这里可以看到我们需要把 dirname 和 / static 组合起来, 但是怎么写代码呢?
<script src="<%= (process.env.NODE_ENV !=='development')?(__dirname+'/static/js/xxx.js'):'../static/js/wangEditer.js'%>"></script>
这样写并不能实现, 发现控制台报错,__dirname is not defined, 瞬间卧槽, 全局变量为毛未定义, 仔细思考一下, ejs 这玩意是模板引擎, 在 index 运行之前就运行 ejs 了, 那么在那之前应该从哪入手呢?
从网上资料可以发现, 大部分内容改动都是在. electron-vue 的 webpack.renderer.config.JS 中修改参数, 那我们来看看这个文件在干嘛
- /**
- * Adjust rendererConfig for production settings
- */
- if (process.env.NODE_ENV === 'production') {
- rendererConfig.devtool = ''
- rendererConfig.plugins.push(
- new BabiliWebpackPlugin(),
- new CopyWebpackPlugin([
- {
- from: path.join(__dirname, '../static'),
- to: path.join(__dirname, '../dist/electron/static'),
- ignore: ['.*']
- }
- ]),
- new webpack.DefinePlugin({
- 'process.env.NODE_ENV': '"production"'
- })
- new webpack.LoaderOptionsPlugin({
- minimize: true
- })
- )
- }
emmm, 既然我们拿不到__dirname, 那我们就创建一个嘛!
- /**
- * Adjust rendererConfig for production settings
- */
- if (process.env.NODE_ENV === 'production') {
- rendererConfig.devtool = '' let realstaticpath = path.join(__dirname,'./static').replace(/\\/g,'\\\\')
- rendererConfig.plugins.push(
- new BabiliWebpackPlugin(),
- new CopyWebpackPlugin([
- {
- from: path.join(__dirname, '../static'),
- to: path.join(__dirname, '../dist/electron/static'),
- ignore: ['.*']
- }
- ]),
- new webpack.DefinePlugin({
- 'process.env.NODE_ENV': '"production"'
- }),
- new webpack.DefinePlugin({
- '__dirname': realstaticpath
- }),
- new webpack.LoaderOptionsPlugin({
- minimize: true
- })
- )
- }
这样我们就通过 realstaticpath 拿到了路径了, 最后再来试试, emmmm 然而还是报错, 这次提示 E:...... 巴拉巴拉, 看上去是 ejs 把我们的地址参数当成了变量, 然后就炸了, 那么再来
- /**
- * Adjust rendererConfig for production settings
- */
- if (process.env.NODE_ENV === 'production') {
- rendererConfig.devtool = '' let realstaticpath = path.join(__dirname,'./static')
- .replace(/\\/g, '\\\\')
- rendererConfig.plugins.push(
- new BabiliWebpackPlugin(),
- new CopyWebpackPlugin([
- {
- from: path.join(__dirname, '../static'),
- to: path.join(__dirname, '../dist/electron/static'),
- ignore: ['.*']
- }
- ]),
- new webpack.DefinePlugin({
- 'process.env.NODE_ENV': '"production"'
- }),
- new webpack.DefinePlugin({
- '__dirname': "'"+realstaticpath+"'"
- }),
- new webpack.LoaderOptionsPlugin({
- minimize: true
- })
- )
- }
这样总算没问题了, 成功通过打包, 然而 console 提示找不到文件, 这里我修改成这样就没问题了, 欢迎大佬指出问题所在.
- /**
- * Adjust rendererConfig for production settings
- */
- if (process.env.NODE_ENV === 'production') {
- rendererConfig.devtool = '' let realstaticpath = path.join(__dirname,'../build/win-unpacked/resources/app.asar/dist/electron/static')
- .replace(/\\/g, '\\\\').replace(/\\/g, '\\\\')
- rendererConfig.plugins.push(
- new BabiliWebpackPlugin(),
- new CopyWebpackPlugin([
- {
- from: path.join(__dirname, '../static'),
- to: path.join(__dirname, '../dist/electron/static'),
- ignore: ['.*']
- }
- ]),
- new webpack.DefinePlugin({
- 'process.env.NODE_ENV': '"production"'
- }),
- new webpack.DefinePlugin({
- '__dirname': "'"+realstaticpath+"'"
- }),
- new webpack.LoaderOptionsPlugin({
- minimize: true
- })
- )
- }
来源: http://www.jianshu.com/p/4e7159ec89b4