vite create vue3

1. フォルダに移動します

2.入力

npm init vite

3. 自由に選択し、Enter キーを押します

4. 作成したプロジェクトに入ります

npm iインストールの依存関係を入力します

5. 変更しますvite.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.走る

 npm run dev

7.パック

npm run build

パッケージ化の際には注意してください。TS を使用する場合、パッケージングが間違っている可能性があります。これは、TS の構文が不正確であることが原因です。解決策:
パッケージ
ング時に TS 検出をオフにします。

修正前

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

修正後

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

8.少ないインストール

npm i less-loader less --save-dev

9. グローバル変数を構成して、ページ内の変数を導入する前に個別に導入する必要があるという問題を解決します。

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

vue.config.js を作成し、次の構成を追加します。

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. vue-router を使用する

npm i vue-router

ファイルを作成するsrc/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;

main.ts に登録する

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