精华内容
下载资源
问答
  • router-view不显示
    千次阅读
    2022-01-23 18:56:28

    前言

    博主使用vue3+vite2打包项目部署到服务器上时遇到几个有关路径的坑,将这些坑的原因及解决方法提供给大家,希望大家可以有所收获

    一、打包默认路径

    以前在vue2+webpack中我们在vue.config.js配置publicPath设置静态资源访问路径,但现在使用vue3+vite2环境我们需要在vite.config.js里面配置base;顺便一提,里面的chunkSizeWarningLimit配置的是打包块的大小,单位为kb

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    export default defineConfig({
      build: {
        outDir: "font",
      },//打包文件夹名称配置
      plugins: [vue()],
      base: './',//配置打包相对路径
      build: {//配置打包块大小
        chunkSizeWarningLimit:1500,
      },
    })
    
    

    二、css的@charset UTF-8规则

    在打包时由于css文件font-family规则 影响了@charset UTF-8规则,我使用直接去除charset规则的影响

     import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    export default defineConfig({
      plugins: [vue()],
      base: './',//配置打包相对路径
      css: {//去除@charset UTF-8规则影响
        postcss: {
          plugins: [
            {
              postcssPlugin: 'internal:charset-removal',
              AtRule: {
                charset: (atRule) => {
                  if (atRule.name === 'charset') {
                    atRule.remove();
                  }
                }
              }
            }
          ]
        }
      },
      build: {//配置打包块大小
        chunkSizeWarningLimit:1500,
      },
      server:{//配置网络服务
         host:'0.0.0.0'
      }
    })
    
    

    三、路由router-view不显示

    上面的坑解决后访问项目(vite打包的项目需要在服务端环境才可以正常访问,不能直接客户端浏览器访问),发现router-view内容不显示,发现是router配置问题下面是博主原先的写法,这样打包之后就会导致router-view不显示

     import {createRouter, createWebHistory} from "vue-router";
    
    // 路由信息
    const routes = [
        {
            path: "/",
            name: "Home",
            component:  () => import('../views/Home/index.vue'),
        },
    ];
    
    // 导出路由
    const router = createRouter({
        history: createWebHistory(),
        routes
    });
    
    export default router;
    
    

    因为在没有后端配合的情况下路由模式为history,页面不会重新加载,应该改为hash模式,如下所示,就可以成功解决该问题

    import {createRouter, createWebHashHistory} from "vue-router";
    
    // 路由信息
    const routes = [
        {
            path: "/",
            name: "Home",
            component:  () => import('../views/Home/index.vue'),
        },
    ];
    
    // 导出路由
    const router = createRouter({
        history: createWebHashHistory(),
        routes
    });
    
    export default router;
    
    

    总结

    以上就是博主打包项目过程中遇到的问题,希望大家可以有所收获;如果文章存在问题,欢迎大家评判指正!!!

    更多相关内容
  • vue2路由中router-view不显示的原因及踩坑记录

    由于平常都不太注意命名细节,对于变量的命名并没有太大的规范,在加上看官方文档并没与什么说明变量名必须为routes,我给写成了routers所以出现了这个原因,不多说上代码
    在这里插入图片描述

    在代码中const声明的变量名必须为routes,千万不能写成别的,我全程就写了一手routers,导致router-view标签不渲染,结果浪费了一个小时排查错误。

    应该是:

    // 创建一个路由器
    const router = new VueRouter({
        routes: [
            {
                path: '/about',
                component: About
            },
            {
                path: '/home',
                component: Home
            },
    
        ]
    })
    // 暴露
    export default router
    

    vue vue-router的神坑
    router-view不显示
    必须是routes 且是个对象
    以上为个人经验,希望能给大家一个参考

    展开全文
  • router-view不显示问题

    千次阅读 2021-04-12 10:16:04
    今天遇到了router-view不显示的问题 在这里给大家简单的分享一下 这里写目录标题关于routes 的问题 关于routes 的问题 这是我app.js的代码(写的一个小样式) var routes=[ { path:'/', component:{ template:`...

    今天遇到了router-view不显示的问题
    在这里给大家简单的分享一下

    这里写目录标题

    关于routes 的问题

    这是我app.js的代码(写的一个小样式)

    var routes=[
        {
            path:'/',
            component:{
                template:` 
                <div>
                    <h1>首页</h1>
                </div>
                `,
            }
        },
        {
            path:'/index',
            component:{
                template:` 
                <div>   
                    <h1>关于sssss我们</h1>
                </div>
                `,
            }
        },
        {
            path:'/index:name',
            component:{
                template:` 
                <div>   
                    <div>{{$route.params.name}}</div>
                </div>
                `,
            }
        }
    ]
    
    var router = new VueRouter({
        routes:routes,
    })
    
    
    new Vue({
        el:"#app",
        router:router,
       
    })
    

    这里是我的index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> -->
        <title>Document</title>
    
    </head>
    <body>
        <div id="app">
            <div>
                <router-link to="/">首页</router-link>
                <router-link to="/index">关于我们</router-link>
                <router-link to="/user/whh">whh</router-link>
                <router-link to="/user/lss">lss</router-link>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </body>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <script src="./app.js"></script>
    </html>
    

    这里我们可以看到,我们js里的第一行,routes。
    这里不能使用其他的,名字例如:router,或者routers等等都可能导致route-view不能显示
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue-routerrouter-view不显示的问题

    千次阅读 2020-10-23 15:41:00
    vue-routerrouter-view不显示的问题 在编写router的时候components总是写成component导致没有报错没有显示,白白浪费时间找文件路径等问题。

    vue-router 中router-view不显示的问题

    在编写router的时候component总是写成components和组件注册的 components搞混淆了,导致没有报错没有显示,白白浪费时间找文件路径等问题。
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue router-view不显示问题

    千次阅读 2020-05-20 11:43:32
    原来在配置router得index.html这个模版里也要加一个做嵌套路由,然后在路由的参数中使用children 配置就可以了 实例:见 layout得侧边栏模板
  • 在代码中const声明的变量名必须为routes,千万能写成别的,笔者就写了一手routers,导致router-view标签渲染,结果浪费了一个小时排查错误。 import Vue from 'vue' import VueRouter from 'vue-router' import ...
  • 下面小编就为大家分享一篇vue2.0 路由不显示router-view的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 转载--vue的 router-view不显示

    千次阅读 2021-11-17 10:53:37
    一切准备就绪,写好路由,然而意想不到的是,router-view无效 主要是报错,代码翻来覆去也知道哪里出问题了 报错连百度都知道该怎么百度了 头疼 想来想去只有是路由错了,最后实在没有办法,把原来项目的...
  • name: 'ImportStudent', component: ImportStudent, meta: { name: '导入学生信息' } } ] } ] } 感觉是页面只能匹配一层路由,如果需要匹配下一级那么需要嵌套,为此,我编写一个组件给了二级路由,给就渲染三...
  • 在学习vue的时候,遇到很多问题,这里做一些总结,持续更新。 今天说一个问题,就是在学习vue的时候,从之前的1.0版本升级...import Router from 'vue-router' import goods from '../components/goods/goods' import r
  • 标签至跳转页面,但跳转页面,没有显示的问题,其原因可能是在index.js里创建的vuerouter对象里面的属性书写错误,其属性值是routes而不是routers //App.vue <template> <div id="app"> <router-...
  • router-view显示不出来的原因

    千次阅读 2021-03-11 21:17:11
    router-view显示不出来的原因: 1.是routes而不是routers 2.VScode不是按一次保存(ctrl+s)就保存全部文件,除非按全部保存(ctrl+k+s),我就是忘了保存对应的文件导致没显示出来
  • 开发的时候有时候会遇到比如 点击这个链接跳转到其他组件的情况,氮素,我们想跳转到新页面,只在当前页面切换着显示,那么就要涉及到路由的嵌套了,也可以说是子路由的使用。 比如我们在一个导航组件中写了三个...
  • 遇到的问题:路由变化,父组件有router-view的情况下子组件页面不显示,查了诸多方案,最终是因为路由跳级的原因;代码如下: router.js MyRoutes:{ path: '/', name: '首页', component: Salary, children: ...
  • const router = createRouter({ mode: "hash", history: createWebHashHistory(process.env.BASE_URL),修改后 // history: createWebHistory(process.env.BASE_URL), routes, }); 之前默认的是history,还是...
  • import VueRouter from "vue-router"; import Content from "../components/Content"; import Main from "../components/main"; import lb from "../components/lb" //使用路由 Vue.use(VueRouter); //配置导出...
  • 大多数人的问题都是index.js里的routes或component写错。 而我,弄了一早上才发现是main.js文件里缺了这两句!
  • 项目场景: 使用router-view之后对应的组件并没有展示,页面空白 原因分析: 配置路由s 而不是配置路由器s 看看官方案例:
  • PS:<keep> 与 相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也在父组件链中存在,比如:你永远在 this.$parent 中找到 keep-alive 。 1. keep-alive的基础使用 最基础的一般是结合动态...
  • Vue关于如何让router-view默认显示页面问题
  • vue2.0之vue-router的神坑 router-view不显示

    万次阅读 多人点赞 2017-11-27 10:56:43
    今天早上学习vue-router的时候敲了两个小时,找了一个小时问题,终于知道问题之坑在哪里,希望我的问题可以帮助初学vue的童鞋,下面直接看代码吧,简单粗暴。const router = new VueRouter({ mode: 'history', ...
  • 早段时间 ,用脚手架vue-cli 搭建的项目,build后放于服务器上,发现其他资源全部...const router = new VueRouter({ mode: 'history', base: '/system/', //添加根目录 routes }) 比如将打包后的dist和inde...
  • main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app') ...router-view></router-view> </div> </tem
  • 错误:添加了router-view标签后,仍然渲染页面,不显示页面内容 通过上网查找,试了很多种不同的方法,很多人是因为routes写成routers导致渲染,但是自己没有问题,经过检查路径,检查路由引入等各方面的内容,...
  • 关于el-main里的router-view跳转显示的图解~
  • Router-view

    千次阅读 2022-05-10 23:59:47
    Router-view也被称为路由的出口,今天我们就探讨下如何去使用路由出口。 也就是: 路径--------------------------------------------------------------->页面 可以把router-view理解成一类代码存放的位置。 ...
  • router-view以及router-link

    2022-02-22 21:04:54
    router-view 主要是在构建单页应用时,方便渲染指定路由对应的组件,渲染的组件是由vue-router指定的。 router-link 组件支持用户在具有路由功能的应用中(点击) 导航。 通过 to 属性指定目标地址,默认渲染成带有...
  • router-viewrouter-link 的区别

    千次阅读 2022-01-26 12:59:52
    1、router-viewrouter-link 的区别 1.router-link和router-view在同一个vue文件(A.vue)里面, 2. router-link设置路由跳转, // <router-link :to="'/url/'"> <li> <a>login</a&...
  • router-view></router-view>,于是了解学习了用法。 首先来看router下的index.js export default new Router({ mode: 'history', routes: [ { //首页跳转到/homepage path: '/', redirect:'/homepage...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,610
精华内容 11,844
关键字:

router-view不显示