我正在构建一个电子桌面应用程序 . 我已经开始使用电子webpack vue样板，在工作时一切正常：“npm run dev”模式 .
当我进行 生产环境 构建：“npm run build：win32”时，应用程序工作正常，但引导程序的glyphicons没有显示...... :(
main.js：
import Vue from 'vue'
import Electron from 'vue-electron'
import Resource from 'vue-resource'
import Router from 'vue-router'
import App from './App'
import routes from './routes'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
Vue.use(Electron)
Vue.use(Resource)
Vue.use(Router)
Vue.config.debug = true
const router = new Router({
scrollBehavior: () => ({ y: 0 }),
routes
})
/* eslint-disable no-new */
new Vue({
router,
...App
}).$mount('#app')
App.js
<style>
@font-face {
font-family: Lato;
src: url('fonts/Lato-Regular.ttf');
}
html, body { height: 100%;margin: 0;}
body {
padding-top:70px;
align-items: center;
background:
radial-gradient(
ellipse at center,
rgba(255, 255, 255, 1) 0%,
rgba(229, 229, 229, .85) 100%
);
background-position: center;
font-family: Lato, Helvetica, sans-serif;
}
h3 {color: #a4a4a4;}
.navbar {border-radius: 0px;}
.menu {background: #dadada!important;overflow: auto;padding:10px 0px 0px 5px;text-align: center;}
.menu div p {font-size: 11px;font-weight: bold;color: #5e5e5e;}
.menu a {text-decoration: none;float:left;margin-left:20px;}
.menu a span {display: block;height: 30px;font-size: 20px;}
.menu a span:hover {color:#36b5dd;}
.navbar .glyphicon {margin-right: 5px;}
@media print {
.menu {display: none;}
}
</style>
<template>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">PRB Receptie</a>
</div>
<ul class="nav navbar-nav">
<li>
<router-link to="/">
<span class="glyphicon glyphicon-home"></span> Situatii
</router-link>
</li>
<li>
<router-link to="/reception">
<span class="glyphicon glyphicon-download-alt"></span> Receptie
</router-link>
</li>
<li>
<router-link to="/invoice">
<span class="glyphicon glyphicon-list-alt"></span> Factura
</router-link>
</li>
<li>
<router-link to="/clients">
<span class="glyphicon glyphicon glyphicon-user"></span> Clienti
</router-link>
</li>
<li>
<router-link to="/suppliers">
<span class="glyphicon glyphicon-shopping-cart"></span> Furnizori
</router-link>
</li>
<li>
<router-link to="/products">
<span class="glyphicon glyphicon glyphicon-tags"></span> Produse
</router-link>
</li>
</ul>
</div>
</nav>
<router-view></router-view>
</div>
</template>
<script>
import store from 'src/vuex/store'
export default {
store
}
</script>
DIST / index.html的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link href="styles.css" rel="stylesheet"></head>
<body>
<div id="app"></div>
<!-- webpack builds are automatically injected -->
<script type="text/javascript" src="build.js"></script></body>
</html>
webpack.conf.js：
'use strict'
const path = require('path')
const pkg = require('./app/package.json')
const settings = require('./config.js')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
let config = {
devtool: '#eval-source-map',
eslint: {
formatter: require('eslint-friendly-formatter')
},
entry: {
build: path.join(__dirname, 'app/src/main.js')
},
module: {
preLoaders: [],
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.html$/,
loader: 'vue-html-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: 'imgs/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]'
}
}
]
},
plugins: [
new ExtractTextPlugin('styles.css'),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './app/index.ejs',
title: settings.name
}),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
output: {
filename: '[name].js',
path: path.join(__dirname, 'app/dist')
},
resolve: {
alias: {
'components': path.join(__dirname, 'app/src/components'),
'src': path.join(__dirname, 'app/src')
},
extensions: ['', '.js', '.vue', '.json', '.css'],
fallback: [path.join(__dirname, 'app/node_modules')]
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
target: 'electron-renderer',
vue: {
loaders: {
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
scss: 'vue-style-loader!css-loader!sass-loader'
}
}
}
if (process.env.NODE_ENV !== 'production') {
/**
* Apply ESLint
*/
if (settings.eslint) {
config.module.preLoaders.push(
{
test: /\.js$/,
loader: 'eslint-loader',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'eslint-loader'
}
)
}
}
/**
* Adjust config for production settings
*/
if (process.env.NODE_ENV === 'production') {
config.devtool = ''
config.plugins.push(
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
)
}
module.exports = config
目录结构：
