vue.js - webpack打包vue项目后的页面body为空
本文介绍了vue.js - webpack打包vue项目后的页面body为空的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
问题：
第一次用Vue+webpack，直接用的官方的cli工具，用的是simple版的，现在写好项目了，并在localhost运行成功，所有文件都打包成一个build.js，通过index.html调用。
但是在npm run build之后的index.html文件右键在浏览器中打开时，body里面都是空的，查看build.js文件，里面都有我的代码，也不是路径的问题，不知道是什么原因：
webpack配置文件如下：
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',//入口文件
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true,
proxy: {
'/app/*': {
target: 'http://test.xxx.com:8080',
secure: false
}
}
},
performance: {
hints: false
},
devtool: '#eval-source-map',
externals: {
'AMap': 'window.AMap'
}
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
index.html文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>标题</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="dist/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="http://webapi.amap.com/maps?v=1.3&key=mykey"></script>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>main.js文件：
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import axios from 'axios';
//引入mint-ui
import { Loadmore } from 'mint-ui';
Vue.component(Loadmore.name, Loadmore);
//picker插件
import picker from 'vue-3d-picker';
Vue.component(picker.name, picker);
//开启debug模式
Vue.config.debug = true;
//改写原型链，方便在组件中使用axios
Vue.prototype.$ajax = axios;
Vue.use(VueRouter);
import allcards from './components/all_cards_page.vue'
import selectcard from './components/select_card_page.vue'
import orderlist from './components/order_list_page.vue'
import allroutes from './components/all_routes_page.vue'
import confirmorder from './components/confirm_order_page.vue'
import waiting from './components/waiting_page.vue'
import success from './components/success_page.vue'
import cancel from './components/cancel_page.vue'
//配置路由规则
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{
path: '/',
component: allcards
},
{
path: '/allcards',
component: allcards
},
{
path: '/selectcard',
component: selectcard
},
{
path: '/orderlist',
component: orderlist
},
{
path: '/allroutes',
component: allroutes
},
{
path: '/confirmorder',
component: confirmorder
},
{
path: '/waiting',
component: waiting
},
{
path: '/success',
component: success
},
{
path: '/cancel',
component: cancel
}
]
})
const app=new Vue({
router:router,
render:h=>h(App)
}).$mount('#app')
App.vue文件：
<template>
<div id="app">
<router-view class="view"></router-view>
</div>
</template>
<script>
import allcards from './components/all_cards_page.vue'
import orderlist from './components/order_list_page.vue'
import AMap from 'AMap'
export default {
name: 'app',
data () {
return {
title:'',
clicked: false
}
},
components:{allcards,orderlist}
}
</script>
<style lang="scss">
@import "./assets/style/reset.css";
@import "./assets/style/_mixs.scss";
@import "./assets/style/top.scss";
@import "assets/style/all_cards_page.scss";
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
width: 100%;
}
</style>
项目目录：
localhost正常加载：
file:///index.html页面空白，但是可以看到style都被解析出来了
我这个应该是算单文件应用吧，因为只有一个入口，很奇怪的是localhost运行完全正常，build之后也能发现图片文件被加上了hash值，build文件没有变化，实在是想不出来什么原因了……
解决方案
最简单的方案，build 的时候，置空 publicPath。。
出现空白，是路径的问题，如果你设置 publicPath:'/dist/' 那么，build后的路径就会从 /dist/ 开始.
publicPath:这篇关于vue.js - webpack打包vue项目后的页面body为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
