侧边栏壁纸
博主头像
M酷博主等级

一帆风顺 ⛵️⛵️⛵️

  • 累计撰写 42 篇文章
  • 累计创建 37 个标签
  • 累计收到 351 条评论

目 录CONTENT

文章目录

vue-cli3 + vue2 项目转 vite 小记

M酷
2021-12-22 / 0 评论 / 5 点赞 / 2,052 阅读 / 3,868 字 / 正在检测是否收录...

1、vite 中 element-ui 主题样式文件报错

提示 Can’t find stylesheet to import

vite_err.png

# element-variables.scss
/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-plus/lib/theme-chalk/fonts';
@import "~element-plus/packages/theme-chalk/src/index";

原因:vite 无法识别 ~ 符号,路径问题

解决:

  • 首先配置 vite.config.js 中的 alias 字段,加上 node_modules 的别名
const alias = {
  "@": path.resolve(__dirname, "./src"),
  "~": path.resolve(__dirname, "./node_modules"),
  vue$: "vue/dist/vue.runtime.esm.js",
};
  • 然后修改路径前缀
$--font-path: "~/element-plus/lib/theme-chalk/fonts";
@import "~/element-plus/packages/theme-chalk/src/index";

如果使用了 TS,可能还要配置 tsconfig.json

"compilerOptions": {
  "paths":{
    "@/*": ["src/*"],
    "@components/*": ["src/components/*"],
   },
}

2、require.context 方法报错

原因:vite 中没有 webpackrequire.context 方法
解决:

  • 使用 viteglob 模块方法 globEager 替换
const modulesFiles = require.context("./modules", true, /\.js$/); // webpack
const modulesFiles = import.meta.globEager("./module/*.js"); // vite
  • 安装 vite-plugin-require-context 解决
import ViteRequireContext from "@originjs/vite-plugin-require-context";
export default {
  plugins: [
    ViteRequireContext(),
    /* options */
  ],
};

3、vite 中使用 /deep/ 进行样式穿透报错

vite_deep.png
原因:vite 中不支持,换成 ::v-deep:deep 即可

::v-deep .el-input__prefix {
  position: absolute;
  top: 2px;
}

4、使用 .eslintignore.prettierignore 忽略不需要格式化的文件或目录

5、eslint 提示 import/no-unresolved

使用 import('@/component/...') 时,eslint 会提示这个错误

原因:因为 vite 需要自己构建配置而 vue-cli 自动构建 "@",所以 eslint 不识别 webpack 的路径别名

解决:直接禁用掉该条 eslint 规则

"import/no-unresolved": "off"

6、配置 SCSS

 css: {
      preprocessorOptions: {
        scss: {
          exclude: "node_modules",
          javascriptEnabled: true,// 支持内联 JavaScript
          // additionalData:'@import "./src/assets/scss/style.scss";'
        },
      },
    }

7、vite 中不支持 require

解决:

  • 修改所有 requireimport 方式导入
  • 尝试使用别名导入
// const echarts = require("echarts");
import * as echarts from "echarts";

9、vite 中使用 vue2 中不支持 jsx

解决:

  1. 通过配置 vite-plugin-vue2 插件解决,但似乎没用
import { createVuePlugin } from "vite-plugin-vue2";

// vite.config.js
plugins: [
  createVuePlugin({
    jsx: true,
    jsxOptons: {
      injectH: false,
    },
  }),
];
  1. 使用 render 函数 代替 jsx
renderFunc(h, option) {
    // return <span>{option.label}</span>;
    return h("span", null, option.label);
}

render(h, context) {
    const { icon, title } = context.props;
    // const vnodes = [];

    // TODO-chin
    // if (title) {
    //   vnodes.push(
    //     <span slot="title" class="f-splice ">
    //       {title}
    //     </span>
    //   );
    // }
    // return vnodes;

    return title
      ? h(
          "span",
          {
            attrs: {
              class: "f-splice",
            },
            props: {
              slot: "title",
            },
          },
          title
        )
      : [];
  }

相关文章:

10、vite 中环境变量的配置&使用

参见官网文档 环境变量和模式

通过根目录下创建 .env 这类文件进行配置,通过 import.meta.env 来访问

11、svg 图标不显示

通过安装vite-plugin-svg-icons 解决

// 配置插件
import viteSvgIcons from "vite-plugin-svg-icons";
plugins: [
  viteSvgIcons({
    // 指定需要缓存的图标文件夹
    iconDirs: [path.resolve(process.cwd(), "src/icons/svg")],
    // 指定symbolId格式
  }),
];
// main.js 中引入
import "virtual:svg-icons-register";

12、打包时提示 Some chunks are larger

原因:由于 chunk 的体积超过了 Vite 的限制

解决:配置 rollupOptionsbuild.chunkSizeWarningLimit

const rollupOptions = {
    output: {
      // 解决打包时Some chunks are larger警告
      manualChunks(id) {
        if (id.includes("node_modules")) {
          return id.toString().split("node_modules/")[1].split("/")[0].toString();
        }
      },
    },
  };

build: {
   // ...
   chunkSizeWarningLimit: 1000, // chunk大小限制
   rollupOptions,
}

13、生成 .gz 文件

通过安装 vite-plugin-compression 实现

yarn add vite-plugin-compression -D

14、node 获取本地 IP

const os = require("os");
const netInterfaces = os.networkInterfaces();
const getIp = () => {
  for (const net of Object.values(netInterfaces)) {
    for (const alias of net) {
      if (
        alias.family === "IPv4" &&
        !alias.address.includes("192.168") &&
        alias.address !== "127.0.0.1" &&
        !alias.internal
      ) {
        return alias.address;
      }
    }
  }
  return "localhost";
};

参考

5
广告 广告

评论区