Vite配置 和 vant框架

vant安装配置

安装

npm i vant -D
npm i @vant/nuxt -D

插件目录全局挂载文件

plugins/global.plugin.ts

import * as vant from 'vant'
// 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式
import "vant/lib/index.css";
export default defineNuxtPlugin((nuxtApp) => {
    return {
        provide: {
            vant: () => vant
        }
    }
})

Vite配置处理跨域

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    //请求接口前缀设置
    runtimeConfig: { // 运行时常量
        public: { // 客户端-服务的都能访问
            baseUrl: process.env.BASE_URL|| '/shop',
        }
    },
    //加载第三方模块
    modules: [
        '@vant/nuxt',
        '@pinia/nuxt',
    ],
    //接口反向代理设置
    vite: {
        server: {
            proxy: {
                '/shop': {
                    target: 'https://fastpros.lyqing.cn/shop',
                    changeOrigin: true,
                    prependPath: true,
                    rewrite: (path) => path.replace(/^\/shop/, '')
                }
            }
        }
    },
    build: {
        // 添加这个是关键，添加后babel才会处理依赖包vant里面的代码
        transpile: [/vant.*?less/],
    },

    // 引入公共全局css文件
    css: [
        "~/public/assets/css/style.css",
        "~/public/assets/css/banner.css",
    ],
    app: {
        head: {
            // 引入公共全局JS文件
            script: [
                { 'src': '/assets/js/jquery-1.8.2.min.js', tagPosition: 'bodyClose' },
                { 'src': '/assets/js/banner.js', tagPosition: 'bodyClose' }
            ],
        },
    },
})