vue3+vite中使用import.meta.glob引入文件

在vue2的时候，我们一般引入多个js或者其他文件，一般使用  require.context 来引入多个不同的文件，但是vite中是不支持 require的，他推出了一个类似的功能，就是用import.meta.glob来引入多个，单个的文件。

在Vue 3中加载本地图片的方法

码农键盘上的梦 2024-02-23 15:17:31

一、使用绝对路径：

将图片放在public目录下，然后使用绝对路径来引用它们。

例如，如果图片位于public/images/logo.png，可以在组件中使用 ：

<img src="/images/logo.png">

来加载它。

但是请注意：public目录下，图片不经过编译。

二、使用相对路径：

如果图片和组件位于同一目录下，可以在模板中直接使用相对路径来引用本地图片和其他静态资源。

例如，如果图片位于与组件相同的目录下，可以使用

<img src="./logo.png">

来加载它。

三、使用require导入：

Vue 3中，你可以使用require函数将图片作为模块导入，然后在组件中使用它。

首先，确保你已经安装了file-loader或url-loader插件。然后，在组件中使用以下代码：

<template>
  <div>
    <img :src="imageSrc" alt="My Image">
  </div>
</template>
 
<script>
import myImage from '@/assets/logo.png'; // 替换成你的图片路径
 
export default {
  data() {
    return {
      imageSrc: ''
    };
  },
  mounted() {
    this.imageSrc = require(`@/assets/logo.png`);
  }
};
</script>

也可以这样直接使用require函数来引用本地图片和其他静态资源。例如：

<img :src="require('./assets/logo.png')">

在这个例子中，require('./assets/logo.png')将会返回一个包装了图片路径的模块路径。注意，使用require函数需要在vue.config.js中进行配置。

四、使用import导入：

如果你使用了Webpack等构建工具，也可以使用ES6的import语法来导入图片。

首先，确保你已经安装了file-loader或url-loader插件。然后，在组件中使用以下代码：

<template>
  <div>
    <img :src="imageSrc" alt="My Image">
  </div>
</template>
 
<script>
import myImage from '@/assets/logo.png'; // 替换成你的图片路径
 
export default {
  data() {
    return {
      imageSrc: ''
    };
  },
  mounted() {
    import(`@/assets/logo.png`).then((src) => {
        this.imageSrc = src.default;
    });
  }
};
</script>

以上是几种加载本地图片和其他静态资源的方法，根据你的具体需求和项目配置选择适合的方法即可。

使用vite-plugin-fake-server 线上部署使用mock

怪大叔95272024-09-09

最近遇到了个麻烦，后端迟迟给不了接口，测试那边又要求数据不能写死，必须可以提供mock调试。这不最近找到了一个mock工具，能解决传统mock工具无法线上部署的问题。

工具名字叫做vite-plugin-fake-server，兼容vite，从官网示例上来看是同时支持mockjs和@faker-js/faker来模拟数据的。使用起来也非常简单，分三步走就行。

1. 安装

npm i vite-plugin-fake-server -D

2. 引入

这里贴出最简单的配置，一个是制定文件夹，一个是设置在生产环境下模拟数据。

// vite.config.ts
import { defineConfig } from 'vite'
import { vitePluginFakeServer } from 'vite-plugin-fake-server'

export default defineConfig({
  plugins: [
    vitePluginFakeServer({
      include: 'mock', // 设置目标文件夹，将会引用该文件夹里包含xxx.fake.{ts,js,mjs,cjs,cts,mts}的文件
      enableProd: true // 是否在生产环境下设置mock
    }),
  ],
})

3. 使用

这里我根据个人习惯，在mock文件夹下创建一个index.fake.js和数个模拟数据文件，比如user.js、common.js等。

首先是user.js，里面放模拟数据，并根据vite-plugin-fake-server的格式要求返回，如下：

// mock/user.js
import { faker } from '@faker-js/faker' // 这里我使用了@faker-js/faker，也可以使用mockjs或者直接假数据

export default [
  {
    url: '/api/auth/login',
    method: 'post',
    response(req) { // 支持参数，url参数是query，body参数放body，不懂的可以打印一下req
      const { username, password } = req.body
      if (username === 'admin' || password === '123456') {
        return {
          code: 200,
          data: faker.string.uuid(),
          msg: '登录成功'
        }
      } else {
        return {
          code: 400,
          msg: '帐号或密码错误'
        }
      }
    }
  },
  {
    url: '/api/auth/login',
    method: 'post',
    response() {
      return {
        code: 200,
        msg: '退出成功'
      }
    }
  },
  {
    url: '/api/auth/userInfo',
    method: 'get',
    response() {
      return {
        code: 200,
        data: {
          name: faker.name.fullName(),
          avatar: faker.image.avatar(),
          email: faker.internet.email(),
          phone: faker.phone.number(),
          address: faker.address.streetAddress()
        }
      }
    }
  }
]

其实是vite-plugin-fake-server的主体了。

import { defineFakeRoute } from 'vite-plugin-fake-server/client'
import user from './user'
import common from './common'

export default defineFakeRoute([...user, ...common])

以上就是如何简单使用vite-plugin-fake-server来实现线上前端模拟的数据的方法了，感谢大佬。这个库还有更多的玩法，我这里就不展开了，最后贴上官网的示例地址。

vue3 配置全局@符号

周伯通*2024-06-18 19:40:05

1.下载依赖包

npm install @types/node --save

2.修改vite.config.ts配置文件

import path from "path";
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

3.修改tsconfig.json配置文件

{
  "compilerOptions": {
  	// ........ 其他配置项
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

解决在终端使用npm run dev时，报错：‘vite‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件

**解决方法： 在Vscode终端输入：npm install -g vite

dependencies 和 devDependencies 的区别，安装包的时候，应该放在哪？

无言非影2024-04-05 12:33:48

在 package.json 文件中，dependencies 和 devDependencies 用于指定项目的依赖包，但它们有不同的用途：

dependencies

• 用途：包含项目运行时所需的依赖包。这些依赖在生产环境中是必需的。
• 示例：vue, element-plus 等前端库，或者后端项目中的 express, mongoose 等。

devDependencies

• 用途：包含项目开发时所需的依赖包。这些依赖仅在开发环境中使用，不会在生产环境中部署。
• 示例：构建工具（如 vite, webpack），代码格式化工具（如 prettier, eslint），测试框架（如 jest, mocha）等。

如何决定安装到哪个依赖中？

1. 开发工具和构建工具：如果是用于代码编译、打包、测试或格式化的工具，通常安装到 devDependencies。
2. 运行时依赖：如果是项目运行时需要用到的库或框架，比如 Vue, React, Axios 等，则应该安装到 dependencies。
3. 安装命令：
   • 安装到 dependencies：npm install package-name 或 yarn add package-name
   • 安装到 devDependencies：npm install package-name --save-dev 或 yarn add package-name --dev

sass 错误安装在dependencies的列子

在使用 Vue 和 Vite 开发项目时，会使用 sass 作为 CSS 预处理器来编写更加灵活和可维护的样式代码。
然而，一个常见的错误是将 sass 错误地添加到项目的 dependencies 中，而不是 devDependencies。
这可能会导致一些问题，例如增加生产环境的包大小和潜在的构建问题。

例如，项目 package.json 文件中的依赖项可能如下所示：

"dependencies": {
  "element-plus": "^2.6.3",
  "sass": "^1.72.0",
  "vue": "^3.4.21"
}

在这种情况下，sass 被错误地放置在了 dependencies 中。

为什么这是一个问题？

dependencies 应该只包含项目在生产环境中运行时所需的包。
而 sass 实际上是一个开发工具，只在开发环境中用于编译 SCSS 文件。
将 sass 放在 dependencies 中意味着它也会被包含在生产环境的构建中，这是不必要的，可能会增加构建大小和复杂性。

解决方案

要解决这个问题，需要将 sass 从 dependencies 移动到 devDependencies。
可以通过以下步骤在命令行中完成：

1. 首先，卸载 sass：

   npm uninstall sass
   

2. 然后，将 sass 安装到 devDependencies：

   npm install sass --save-dev
   

完成这些步骤后，package.json 应该会更新，将 sass 放在 devDependencies 中，如下所示：

"devDependencies": {
  "sass": "^1.72.0",
  ...
}

解决： Vue 3 遇到 process is not defined

使用 vite 安装 vue3 时，如果使用了 process.env，会遇到 process 未定义的情况，原因是 process.env 已经被移除了。解决办法是在 vite.config.ts 中增加 define：

解决Vite启动的时候：访问被拒绝

方式一、修改vite的配置文件