vite搭建vue3、typeScript项目

使用vite搭建vue3、typeScript项目的具体步骤：

一、创建项目vite

1.逐步操作：

① 使用npm：npm create vite@latest
② 使用yarn：yarn create vite
③ 使用pnpm：pnpm create vite

2.直接创建middleground-login为项目名称

1.运行：npm create vite@latest middleground-login -- --template vue其中
2.选择vue —— vue-ts
3.按照提示进行操作：
①cd 项目名
②npm install
③npm run dev

3.安装指定vite版本

npm init vite@2.9.5 middleground-login

4.完成项目创建，运行效果：

二、细节配置

1.①配置tsconfig.json

添加配置@，通过@代表src

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

②同时在vite.config.ts文件中配置@：

import { defineConfig, ConfigEnv, UserConfigExport, loadEnv } from 'vite'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default (({ command, mode }: ConfigEnv): UserConfigExport => {
  // 环境变量
  let env = loadEnv(mode, process.cwd())

  // 是否为生产环境
  let isProduction = mode === 'production'

  return defineConfig({
    base: env.VITE_BASE,

    plugins: [
      vue(),
    ],
    css: {},
    resolve: {

      alias: {

        '@': '/src'
      }
    },
    server: {

      // host设置为true才可以使用network的形式，以ip访问项目
      host: true,

      // 端口号
      port: 8080,

      // 自动打开浏览器
      open: false,

      // 跨域设置允许
      cors: true,

      // 如果端口已占用直接退出
      strictPort: true,

      // 接口代理
      proxy: {
        '/workwxht': {
          target: 'http://192.168.1.101:9001',

          // 允许跨域
          changeOrigin: true,

          // 重写地址
          rewrite: (path) => path.replace('/workwxht/', '/')
        }
      }

    },
    build: {
      brotliSize: false,

      // 消除打包大小超过500kb警告
      chunkSizeWarningLimit: 500,

      // 在生产环境移除console.log
      terserOptions: {

        compress: {

          drop_console: true,

          drop_debugger: true

        },

      },

      assetsDir: 'static/assets',

      // 静态资源打包到dist下的不同目录
      rollupOptions: {

        output: {

          chunkFileNames: 'static/js/[name]-[hash].js',

          entryFileNames: 'static/js/[name]-[hash].js',

          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',

          // 静态资源分拆打包
          manualChunks(id: any) {

            if (id.includes('node_modules')) {

              return id.toString().split('node_modules/')[1].split('/')[0].toString();

            }

          }

        },

      },
    },
    define: {
      'process.env': { ...env, isProduction }
    }
  })
})

// export default defineConfig({
//   plugins: [vue()]
// })

2.安装vue-router配置路由：

npm i vue-router -S
1.配置路由：
createWebHistory 可以理解为history模式，路径不带#
createWebHashHistory可以理解为hash模式，路径带#

import {
  createRouter, createWebHistory
} from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      name: 'ceshi',
      path: '/ceshi',
      component: () => import("@/views/ceshi/index.vue"),
      meta: {
        title: '测试'
      }
    }
  ]
})
export default router;

2.修改App.vue,编辑路由出口

<template>
  <!-- 测试 -->
  <router-view v-slot="{ Component }">
    <component :is="Component" />
  </router-view>
</template>

3.在main.ts中配置路由

import { createApp } from 'vue'

import App from './App.vue'

// 路由
import $router from './router'

// createApp(App).mount('#app')
const app = createApp(App)

app.use($router)

app.mount('#app')

此时，通过对应的路由即可访问页面。

三、配置UI库

1.引入

element-plus：npm install element-plus --save

设置成官方推荐的自动引入方式：
安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

2.在vite.config.ts中配置自动导入：

// 自动导入引用
import AutoImport from "unplugin-auto-import/vite"

// 自动导入组件
import Components from 'unplugin-vue-components/vite'

// element plus 
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


plugins: [
      vue(),
      AutoImport({

        dts: './src/auto-imports.d.ts',

        imports: ['vue', 'pinia', 'vue-router', '@vueuse/core'],

        // Generate corresponding .eslintrc-auto-import.json file.
        // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
        eslintrc: {

          // Default `false`
          enabled: true,

          // Default `./.eslintrc-auto-import.json`
          filepath: './.eslintrc-auto-import.json',

          // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
          globalsPropValue: true,

        },

        resolvers: [ElementPlusResolver()],

      }),
      Components({

        dts: './src/components.d.ts',

        // imports 指定组件所在位置，默认为 src/components
        dirs: ['src/components/'],

        resolvers: [ElementPlusResolver()],

      }),
    ],

配置完成之后，可以直接在页面使用：

<template>
  <el-button>Default</el-button>
</template>

四、其他配置安装信息

1.安装axios：

npm i axios -S 或 yarn add axios -S

2.安装sass:

npm i sass -S 或 yarn add sass -S

3.安装pinia:

npm i pinia-S 或 yarn add pinia -S

4.安装Autoprefixer

自动添加前缀
yarn add autoprefixer -D
yarn add postcss-flexbugs-fixes -D

如果显示网络连接有问题：
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz: connect ETIMEDOUT 104.16.24.34:443".
见：五、遇到的问题

在vite.config.ts文件中添加配置：

 import Autoprefixer from 'autoprefixer'

import PostcssFlexbugsFixes from 'postcss-flexbugs-fixes'

export default defineConfig({
 ...
 ...
css: {

    postcss: {

      plugins: [

        Autoprefixer({
          overrideBrowserslist: [
            'Android 4.1',
            'iOS 7.1',
            'Chrome > 31',
            'ff > 31',
            'ie >= 8',
            '> 1%'
          ],
          grid: true
        }),

        PostcssFlexbugsFixes()

      ],

    }

  },
  ...
  ...
 })

5.安装vconsole便于移动端调试：

npm i vconsole -S 或 yarn add vconsole -S
在main.ts文件中加上如下配置：

// 调试
import VConsole from 'vconsole'

let vConsole = new VConsole();

export default vConsole;

效果：

五、遇到的问题：

1.打包不成功：

提示 Property 'code' does not exist on type '{}'
解决办法：打开package.json文件，将"build": "vue-tsc --noEmit && vite build"改为：build": "vite build"即可。

2.打包报错：

terser not found. Since Vite v3, terser has become an optional dependency. You need to install it.

解决办法：安装terser
npm i terser --legacy-peer-deps 或 yarn add terser --legacy-peer-deps

3.安装autoprefixer报错

解决办法：
1、先查看是否切换淘宝镜像：
①设置为淘宝镜像
npm config set registry https://registry.npm.taobao.org/
yarn config set registry https://registry.npm.taobao.org/
②查看当前镜像
npm get registry
yarn config get registry

2、淘宝镜像下还是不行的话，执行以下方法：
①删除项目下yarn.lock文件：

②重新安装依赖：
npm install
yarn install
③再次安装，就成功了