在开发模式下,一切正常,但使用静态构建后,它只是空白页!我见过很多问题,但没人能和我类似。
router / index.js:
import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
import BrandPage from '@/components/BrandPage'
import Article from '@/components/Article'
Vue.use(Router)
console.log("Router");
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: Main,
props: dynamicPropsMain
}
...
]
})
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false;
console.log("main");
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
App.vue:
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
mounted() {
console.log("App");
}
}
</script>
<style>
</style>
我也这样记录每个组件:
mounted() {
console.log("Main");
}
这是我从dist文件夹中打开index.html文件时在控制台中看到的内容:
顺便说一句没有错误!
我将index.html中的所有路径更改为relative,如您所见:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>cosmetic</title>
<link href=./static/css/app.6e402e4fa684582f062c00087423d24c.css rel=stylesheet>
</head>
<body>
<script src=https://use.fontawesome.com/5c25b8d8cc.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js></script>
<div id=app></div>
<script type=text/javascript src=./static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=./static/js/vendor.5f799c4e5a271a20f280.js></script>
<script type=text/javascript src=./static/js/app.3990053e5416194b5d89.js></script>
</body>
</html>
所有这些使我认为路由器存在问题,而且我不知道如何更深入地检查...
请任何人帮助我!!!我将非常感谢!
答案 0 :(得分:0)
您只是尝试打开index.html吗?这是行不通的。 为了使用您的Vue应用程序,您必须在Web服务器上提供整个dist文件夹。