vite create vue3

1. Go to the folder

2. Input

npm init vite

3. Free choice, then press Enter

4. Enter into the created project

Enter npm iinstallation dependencies

5. Modifyvite.config.ts

import {
    
     defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import {
    
     resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
    
    
  plugins: [vue()],
  resolve: {
    
    
    alias: {
    
    
      //设置全局路径
      "@": resolve(__dirname, "./src"),
    },
  },
  base: "./", // 打包路径
  server: {
    
    
    // host: "192.168.10.107", //设置ip,方便调试
    host: "0.0.0.0", //设置ip,方便调试
    https: false, //是否启动https
    port: 8080, // 服务端口号
    open: false, //服务启动时候是否自动打开浏览器
    cors: true, //是否允许跨域
    proxy: {
    
    
      //设置代理
      // 如果是 /apiUrl 打头，则访问地址如下
      "/apiUrl": {
    
    
        target: "http://127.0.0.1:8990/", //代理接口
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/apiUrl/, ""),
      },
    },
  },
  // 打包配置
  build: {
    
    
    target: "modules",
    outDir: "dist", //指定输出路径
    assetsDir: "assets", // 指定生成静态资源的存放路径
    minify: "terser", // 混淆器，terser构建后文件体积更小
  },
});

6. run

 npm run dev

7. Pack

npm run build

Pay attention when packaging. If you use TS, the packaging may be wrong. It is caused by the imprecise syntax of TS.
Solution:
turn off TS detection when packaging

before modification

"scripts": {
    
    
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },

after modification

"scripts": {
    
    
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

8. Install less

npm i less-loader less --save-dev

9. Configure global variables to solve the problem that variables in the page need to be introduced separately before they are introduced

npm i style-resources-loader
npm i vue-cli-plugin-style-resources-loader

Create vue.config.js and add the following configuration

const path = require("path");
module.exports = {
    
    
  transpileDependencies: ["vuetify"],
  pluginOptions: {
    
    
    "style-resources-loader": {
    
    
      preProcessor: "less",
      patterns: [
        // 引入公共文件
        path.resolve(__dirname, "./src/assets/style/common.less"),
      ],
    },
  },
  css: {
    
    
    loaderOptions: {
    
    
      less: {
    
    
        lessOptions: {
    
    
          modifyVars: {
    
    
            "primary-color": "#ec6800",
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};

10. Use vue-router

npm i vue-router

Create a filesrc/router/index.ts

import {
    
     createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
  {
    
    
    path: "/Home",
    name: "Home",
    component: () => import("@/view/home/home.vue"),
    // children: [
    //   {
    
    
    //     path: "/Home/about",
    //     name: "about",
    //     component: () => import("@/view/about/about.vue"),
    //   },
    // ],
  },
  {
    
    
    path: "/404",
    name: "notFound",
    component: () => import("@/view/notFound.vue"),
  },
  {
    
    
    path: "/about",
    name: "about",
    component: () => import("@/view/about/about.vue"),
  },
  {
    
     path: "/", redirect: {
    
     name: "Home" } },
  {
    
    
    path: "/:catchAll(.*)", //"/:pathMatch(.*)",
    redirect(to) {
    
    
      if (to.path === "/") {
    
    
        return "/Home";
      } else {
    
    
        //404
        return "/Home";
      }
    },
  },
];
const router = createRouter({
    
    
  history: createWebHistory(),
  routes,
});
export default router;

Register in main.ts

import router from "./router/index";
const app = createApp(App);
app.use(router);
app.mount("#app");