vue组件化部署到服务器router-view里边的内容为空

使用vue-cli脚手架搭建的项目,本地都没有什么问题,执行npm run build压缩后把dist文件夹丢到服务器,控制台可以看到js和css都进来了并无报错,但是首页index.html里的router-view里的内容为空。如果只把dist里边内容放在根目录,没有嵌套dist这个文件夹的话又是可以的,一直想不通啊,请大神指点一二。

这是首页的index.html的内容,js和css路径保证无错都是进来了,没有报错就是router-view里边的内容为空

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title v-text="siteTitle"></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>

<body>
        <router-view></router-view>
    <!-- built files will be auto injected -->
</body>

</html>

这个是我的main.js文件
import Vue from 'vue';//加载vue.js
// import Vuex from 'vuex';//组件之间的通信
import VuexStore from './vuex/store' ;//vuex状态管理,组件之间的通信
import VueRouter from 'vue-router' ;//加载vue-router.js路由
import RouterConfig from './router' ;//加载vue-router的定义文件

Vue.use(VueRouter);//使用路由插件
//路由器需要创建一个根实例
const App = Vue.extend({

data(){
    return {
        siteTitle:'首页'
    }
}

}) ;

//创建一个路由器实例
const router = new VueRouter({

hashbang:false,//去除#!开头
transitionOnload:false,//初次加载的时候是否对<router-view>处理场景切换效果
history:true,//是否开启html5模式,去掉锚点
saveScrollPosition:false //记住页面的滚动位置 html5模式适用

});

//定义路由规则
router.map(RouterConfig);
//路由器重定向,此指令会将任意未匹配路径到 404页面
router.redirect({
// '*': '/error'
});

//路由会创建一个实例,挂载到相应的选择符匹配元素上
router.start(App,'html');

阅读 7.6k
4 个回答

我也遇到这个问题了,我只能把index.html放根目录了

纠结了我两天天,我自己试了好多次,也算是找到了解决方案。
这个dist连同文件夹丢到根目录的话,访问dist的路径就变成了xxx.com/dist,这个dist路径是不存在的,因为路由并没有设置,所以会默认是没有东西的,自然就没有东西了。
我在那个地方放了一个router-view标签,以为是它没有起作用,其实不是。是因为如果按照这个路由路径是根本不存在的。
最好的方案就是设置路由重定向,如下

router.redirect({
  '*': '/error',//404页面
  '/dist':'/'
});

部署代码本来就只需要部署dist目录下的文件,而不是将整个dist目录上传

多谢,多谢,vue-router的问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题