vue3(vite基础配置)

Posted on | In
Words count in article: 867 | Reading time ≈ 4

初始化 vite

1
2
3
4
$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

开发/生产环境 配置

变量前缀 prefix = ‘VITE_‘;

1
2
3
4
#.env
VITE_APP_TITLE = vite-app
VITE_PORT = 3000
VITE_OUT_DIR = dist
1
2
#.env.development
VITE_APP_URL = /developmentAPI
1
2
#.env.production
VITE_APP_URL = /productionAPI

当尝试在项目中获取所有环境变量时，只能拿到 process.env.NODE_ENV 值，尝试在配置文件中赋值变量：

1
2
3
4
5
6
7
8
9
10
11
12
13
# vite.config.ts
import dotenv from 'dotenv';

const env = process.env.NODE_ENV;
console.log('env: ', env); // undefined
const envFiles = ['.env', `.env.${env}`, `.env.${env}.local`];

for (const file of envFiles) {
  const envConfig = dotenv.parse(fs.readFileSync(file))
  for (const k in envConfig) {
    process.env[k] = envConfig[k]
  }
}

参考issue#1096,最终配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# vite.config.ts
import { loadEnv } from 'vite';
import type { UserConfig } from 'vite';

const root: string = process.cwd();

export default (mode: 'development' | 'production'): UserConfig => {
  const env = loadEnv(mode, root);
  const { VITE_OUT_DIR, VITE_PORT } = env

  return {
    root,
    outDir: VITE_OUT_DIR,
    port: Number(VITE_PORT),
    ...
  }
})

在项目主入口则用”import.meta.env”获取全局变量

标题栏配置 参照vite-plugin-html

ant-design-vue及 less 配置

1
yarn add less less-loader -D
1
2
3
4
5
6
7
8
9
# vite.config.ts
import { modifyVars } from 'your-theme-file.ts'; //导入个性化变量

cssPreprocessOptions: {
  less: {
     modifyVars,
     javascriptEnabled: true,
  }
},

按需导入

1
2
import Button from "ant-design-vue/lib/button";
import "ant-design-vue/lib/button/style";

使用 babel-plugin-import

1
import { Button } from "ant-design-vue";

tip

嵌套组件需要单独声明，以 Breadcrumb 组件为例, 查看其源码可知:

1
2
3
4
5
6
7
// ant-design-vue/lib/breadcrumb/index.js
_Breadcrumb.default.install = function (app) {
  app.component(_Breadcrumb.default.name, _Breadcrumb.default);
  app.component(_BreadcrumbItem.default.name, _BreadcrumbItem.default);
  app.component(_BreadcrumbSeparator.default.name, _BreadcrumbSeparator.default);
  return app;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
  <a-breadcrumb>
    <a-breadcrumb-item v-for="(item, index) in crumbList" :key="index">
      {{ item.name }}
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import { Breadcrumb } from "ant-design-vue";
import { useRouter } from "vue-router";

export default defineComponent({
  components: {
    [Breadcrumb.name]: Breadcrumb,
    [Breadcrumb.Item.name]: Breadcrumb.Item,
  },

  setup() {
    const crumbList = ref([]);
    const router = useRouter();

    watch(router.currentRoute, (val) => {
      crumbList.value = val.matched;
    });

    return {
      crumbList,
    };
  },
});
</script>

typescript 配置

根目录创建 typescript 的配置文件 tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "react",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "/@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/mock/table.ts",
    "src/router/index.ts"
  ],
  "exclude": ["node_modules", "dist", "**/*.js"]
}

优化 ts 类型判断

1
2
3
4
5
6
// shims.d.ts
declare module "*.vue" {
  import { defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent>;
  export default component;
}

vue-router、vuex 配置

1
yarn add vue-router@next vuex@next -S

eslint 配置

1
yarn add eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue -D

echarts 配置

1
2
yarn add echarts -S
yarn add @types/echarts -D

一开始使用的 echarts 版本 5.0.0 但导入后报如下错误

以及删除了之前内置地图资源包 详见github

回退版本 4.0 可正常使用, 附上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<template>
  <div ref="chartRef" :style="{ height, width }" />
</template>

<script lang="ts">
import { defineComponent, ref, unref, onMounted, onUnmounted } from "vue";
import echarts from "echarts";

import "echarts/map/js/china";

export default defineComponent({
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
  },

  setup() {
    const chartRef = ref<HTMLDivElement | null>(null);
    const option = {
      series: [
        {
          type: "map",
          map: "china",
        },
      ],
    };

    onMounted(() => {
      const chartInstance = echarts.init(unref(chartRef));
      chartInstance.setOption(option);
      window.onresize = () => {
        chartInstance.resize();
      };
    });

    onUnmounted(() => {
      window.onresize = null;
    });

    return {
      chartRef,
    };
  },
});
</script>

若出现依赖警告, 需把 echarts/map/js/china 加入 optimizeDeps 即可, 如下：

1
2
3
4
5
6
optimizeDeps: {
  include: [
    'echarts',
    'echarts/map/js/china'
  ],
}