Vue3+Vite开发初始配置

配置默认路径别名

• 通过Vue Cli创建的create vue等都默认配置了：
  • @代表了src文件夹
• 通过Vite命令直接创建的 npm create vite@latest my-vue-app -- --template vue,是没有配置默认路径的

在vite.config.js目录下引入path模块

import path from "path"
export default defineConfig({
  resolve: {
    alias: {
      "~": path.resolve(__dirname, 'src')
    }
  },
})

本地开发请求接口跨域问题

本地开发时，如果直接在axios的baseURL写服务器路径，那么本地访问时会有跨域问题

• 文档： cn.vitejs.dev/config/serv…

  • vite官网 => 配置 => 服务器选项 => server.proxy

• 配置

  • 在vite.config.js文件

    export default defineConfig({
      server: {
        proxy: {
          '/api': {
            target: 'http://ceshi13.dishait.cn',
            changeOrigin: true,
            rewrite: (path) => path.replace(/^/api/, ''),
          },
        }
      },
    

  • 上面表示用/api来代替baseurl

  • 所以axios配置

    const baseURL = process.env.NODE_ENV === 'development' ? '/api' : 'http://ceshi13.dishait.cn';
    const instance = axios.create({
        baseURL,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    });
    

动态设置页面标题

• 先在router里面的每个路由设置meta的title

      { 
          path: '/',
          meta: {
              title: '后台首页'
          },
          component: () => import('~/pages/Index.vue')
      },
      {
          path: '/login',
          meta: {
              title: '登录页'
          },
          component: () => import('~/pages/Login.vue')
      }
  

• 在全局前置守卫里面设置

  // 全局前置守卫
  router.beforeEach(async (to, from, next) => {
  
      // 设置页面标题
      const title = (to.meta.title ? to.meta.title + '-' : '') + '小黄的商城'
      document.title = title
  
      next()
  })
  

loading进度条

• 插件： nprogress

• 地址： www.npmjs.com/package/npr…

• 步骤

  • 下载: npm i nprogress

  • main.js里引入样式： import 'nprogress/nprogress.css'

  • // 开始
    NProgress.start();
    // 结束
    NProgress.done();
    

  • 在全局守卫里调用

    import NProgress from 'nprogress';
    // 全局前置守卫
    router.beforeEach(async (to, from, next) => {
        // 显示loading
        NProgress.start();
    }）
    // 全局后置守卫
    router.afterEach((to, from) => {
        // 隐藏loading
        NProgress.done();
    })