账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    nuxt如何修改默认首页?
    37
    0
    某开源项目前端工程用的vue、nuxt、typescript等技术栈写的,默认页面pages有两个vue组件index.vue 项目首页,默认页面auth.vue 登录页面由于项目属于nuxt结构,所以我找不到router.js配置的地方,在.nuxt地下确实有router.js和router.json,但是每次修改重启项目编译之后又被覆盖了。我想让用户访问的时候就访问的auth.vue组件,如何配置?nuxt.config.js配置如下:import colors from 'vuetify/es5/util/colors'import i18n from './i18n'export default { ssr: false, /* ** Headers of the page */ head: { titleTemplate: '语料标注工具', title: '语料标注工具' || '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: '自然语言处理语料标注工具' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, ] }, server: { host: '0.0.0.0' // default: localhost }, env: { baseUrl: '/v1' }, /* ** Customize the progress-bar color */ loading: { color: '#fff' }, /* ** Global CSS */ css: [ ], /* ** Plugins to load before mounting the App */ plugins: [ '~/plugins/filters.js', '~/plugins/vue-youtube.js', '~/plugins/vue-shortkey.js', '~/plugins/services.ts', '~/plugins/color.ts', '~/plugins/role.ts' ], /* ** Nuxt.js modules */ modules: [ ['nuxt-i18n', i18n], // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', '@nuxtjs/eslint-module' ], buildModules: [ '@nuxt/typescript-build', '@nuxtjs/composition-api/module', ['@nuxtjs/google-analytics', { id: process.env.GOOGLE_TRACKING_ID }], [ '@nuxtjs/vuetify', { customVariables: ['~/assets/css/fonts.css'], treeShake: true, defaultAssets: { font: false, icons: ['mdiSvg'], }, }, ], [ '@nuxtjs/google-fonts', { families: { Roboto: [100, 300, 400, 500, 700, 900] }, display: 'swap', download: true, overwriting: true, inject: true, } ] ], /* ** Axios module configuration ** See https://axios.nuxtjs.org/options */ axios: { proxy: true }, proxy: { // Use a fake value for use at build-time '/v1/': { target: process.env.API_URL || 'http://127.0.0.1:8000' } }, /* ** vuetify module configuration ** https://github.com/nuxt-community/vuetify-module */ vuetify: { theme: { primary: colors.blue.darken2, accent: colors.grey.darken3, secondary: colors.amber.darken3, info: colors.teal.lighten1, warning: colors.amber.base, error: colors.deepOrange.accent4, success: colors.green.accent3, themes: { dark: { primary: '#21CFF3', accent: '#FF4081', secondary: '#ffe18d', success: '#4CAF50', info: '#2196F3', warning: '#FB8C00', error: '#FF5252' }, light: { primary: '#1976D2', accent: '#e91e63', secondary: '#30b1dc', success: '#4CAF50', info: '#2196F3', warning: '#FB8C00', error: '#FF5252' } } } }, /* ** Build configuration */ build: { /* ** You can extend webpack config here */ publicPath: process.env.PUBLIC_PATH || '/_nuxt/', extend(config, ctx) { // config.module.rules.push({ // test: /\.(txt|csv|conll|jsonl)$/i, // loader: 'file-loader', // options: { // name: '[path][name].[ext]' // } // }) config.module.rules.push({ enforce: 'pre', test: /\.(txt|csv|json|jsonl)$/, loader: 'raw-loader', exclude: /(node_modules)/ }) config.module.rules.push({ test: /\.(ogg|mp3|wav|mpe?g)$/i, loader: 'file-loader', options: { name: '[path][name].[ext]' } }) }, }}
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 圆嘟嘟的爱鱿 普通会员 1楼

      在Nuxt.js中,要修改默认首页(默认路由),你需要调整nuxt.config.js文件中的router配置项。具体来说,可以通过设置router.base或自定义pages目录下的文件结构来实现。

      如果你想更改默认访问的页面组件,例如将默认首页从/pages/index.vue更改为 /pages/myHome.vue,只需将myHome.vue放置在pages目录下,并确保该文件夹内没有index.vue文件,这样当访问应用的根路径时,默认就会加载myHome.vue作为首页。

      但请注意,Nuxt.js 默认情况下会自动将pages目录下的.vue文件映射为对应的路由,所以无需额外配置即可直接通过URL访问。

      如果你想要改变的是应用的基础路径(base router),可以在nuxt.config.js中添加如下配置:

      javascript module.exports = { router: { base: '/your-base-path/' // 将'your-base-path'替换为你想要的基础路径 } }

      这个配置并不会改变默认首页,而是会影响到整个应用的路由基础路径。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部