前言

今天接手一个vue3的项目，其中的一些配置不是很好用，今天就简单的来回顾下。今天的内容主要是一些组件的引用简写。

路由中对应组件的引入

先来看下router.js中的代码：

import { createRouter, createWebHistory } from 'vue-router'

// const About = { template: '<div>About</div>' }

const routes = [
    {
        path: '/',
        component: () => import ("../src/components/scene/child.vue")
        // 我们在引用组件的时候有些时候是会有插件帮们自动关联到对应的组件，但是一般不会以.vue的后缀进行结尾
    }

]


const router = createRouter({
    history: createWebHistory(),
    routes, // `routes: routes` 的缩写
})

export default router

如何解决不以.vue为后缀的报错这个问题呢？

看下vite.config.js的简单配置吧

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
      extensions: ['.vue','.js'],
  }
})

注释：resole中extensions选项就是用来帮我们自动解析我们的文件的，我们在项目不但使用到了.vue文件，而且我们有时候我们还会用到比如.json \ .ts \ .css....,如果需要，往数组里面加就行了

简单的serve配置

首先，vite会给我们一个默认的打开地址: http://127.0.0.1:5173/。

我们一般在开发环境使用的地址一般是这样的：http://localhost:8080/. 虽然说编译后会帮我们自动的打开页面，但是我看着还是不习惯。

比如我们改成下面这样。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
   port:8888,
   host:'localhost',
   open:true,
   proxy:{

   }
  },
  plugins: [vue()],
  resolve:{
      extensions: ['.vue','.js'],
  }
})

这样我们就可以在http://localhost:8888/ 自动打开了。

resolve之路径简写

resolve:{
    alias: {
        '@': resolve('src'),
        views: resolve('src/views'),
    },
    extensions: ['.vue','.js'],
}

我们一般在webpack中这样配置就可以了，不过有时候会报错resolve is not found这样的错误。

我们可以用下面的方式进行替代：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'

export default defineConfig({
    server: {
        port: 9000,
        open: true,

    },
    plugins: [vue()],
    resolve:{
        alias: {
            '@': resolve('src'),
            views: resolve('src/views'),
        },
        extensions:['.vue','.js','.css'],
    },
})

我们可以提前将resolve从path中解构出来，这样就不会报错了。

这样我们在引入的时候就可以轻松搞定了。