Vite 2.0

style sass scope 动画编译问题

<style lang="scss" scope>
  @keyframes test {
      0% {
        top: 17px;
        left: 220px;
        opacity: 0;
      }
  }
  编译后-->
  @keyframes test[data-v-1QAE1D] {
      0%[data-v-1Q9SJ1] {  --此处导致动画失效
        top: 17px;
        left: 220px;
        opacity: 0;
      }
  }
</style>

暂时不用scope可以避免该问题

集成 monaco-editor

You can now add the environment workers without any further configuration (ref: github.com/vitejs/vite…)

// monaco-editor.vue
import 'monaco-editor/min/vs/editor/editor.main.css';
import * as monaco from 'monaco-editor';

import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'json') {
      return new jsonWorker()
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker();
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker();
    }
    if (label === 'typescript' || label === 'javascript') {
      return new tsWorker();
    }
    return new editorWorker()
  }
}

monaco.editor.create(document.getElementById('container'), {
  value: "function hello() {\n\talert('Hello world!');\n}",
  language: 'javascript'
})

解决build之后加载worker的问题将worker单独出来打包 (ref:github.com/vitejs/vite…)

// vite.config.js
import { defineConfig } from 'vite';
const prefix = `monaco-editor/esm/vs`;
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          jsonWorker: [`${prefix}/language/json/json.worker`],
          cssWorker: [`${prefix}/language/css/css.worker`],
          htmlWorker: [`${prefix}/language/html/html.worker`],
          tsWorker: [`${prefix}/language/typescript/ts.worker`],
          editorWorker: [`${prefix}/editor/editor.worker`],
        },
      },
    },
  },
});

vue3

jsx/tsx 解析器

vue-router-next

template标签下多根节点，导致页面不加载

<template>
    <el-input v-model="testInput" />
    <hello-world msg="hello-world" />
</template>

改成以前单一根节点可以解决问题

<template>
    <div>
        <el-input v-model="testInput" />
        <hello-world msg="hello-world" />
    </div>
</template>

jsx/tsx 中使用插槽 slots v-slots

// 子组件
setup(props, { slots }) {
    return () => (
        <div>
            插槽前
        {slots.search && slots.search()}
            插槽后
        </div>
    );
}
// 父组件
setup() {
    let testInputa = ref('');
    return () => (
        <TableSearch
            v-slots={{
                search: () => (
                    <>
                        <el-input v-model={testInputa.value} />
                        {testInputa.value}
                    </>
                )
            }}
        ></TableSearch>
    );
}

在vue文件中使用 jsx/tsx 和 scoped，css标签多了-s后缀

<style type="text/css">.table-search-form[data-v-52fa83d4] {
  overflow: hidden;
  height: 0;
}
</style>
<div class="table-search-form" data-v-52fa83d4-s>
    ···
</div>

原因：tsx组件被当成插槽，而style没有：

// vue-next\packages\compiler-sfc\src\stylePluginScoped.ts
node.selector = selectorParser(selectors => {
  function rewriteSelector(selector: Selector, slotted?: boolean) {
      ···
      if (shouldInject) {
          const idToAdd = slotted ? id + '-s' : id
          ···
      }
      ···
  }
  selectors.each(selector => rewriteSelector(selector))
}).processSync(node.selector)

解决方式：

1. 不使用scope
1. 使用template模板

jsx/tsx 中获取dom或vnode节点，并调用其函数

import { ref } from 'vue';
const myRef = ref();
// 此处一定要函数形式输出组件，否则不会触发ref赋值
const xxx = ()=>(<xxx ref={(el: any) => (myRef.value = el)} />);
// 调用 myRef.value.xx()

Vite2.0开发问题汇总