An overview of the

  • This article focuses on building Vue3 projects using Vite and supporting TS syntax.
  • Implement Mock data configuration, JSX syntax support, how to implement browser compatibility, Axios encapsulation, configure environment variables
  • The advantage is that you don’t have to rely on back-end development during development, as long as both parties agree on the data model. If you use React, the JSX syntax configuration gives you the same freedom as React development.

Build the Vite + Ts project

npm init vite@latest my-vue-app  vue-ts
Copy the code
  • Dev /guide/#brow…
  • After the project is built, the generated directory structure supports TS syntax by default

Configure the JSX syntax

  • Use @vitejs/plugin-vue-jsx according to the community plugin provided by Vite
  • Once installed, the vite.config.ts file can be configured to support JSX syntax, as described below
// JSX syntax import {defineComponent} from "vue" export default defineComponent({name: "Test", setup(props) { }, Render () {return < h2 > sdfasdf < / h2 >}}) -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- / / citation < script lang = "benchmark" > import Test from "./test" export default { components: { Test } } </script>Copy the code

Configuring environment Variables

  • Create a file named. Env in the root directory to configure environment variables. For details, see the official guide
 VITE_DEV_API="/mock" // Mock interface data for local development
 VITE_PRD_API="/api"  // In production environment, use proxy
Copy the code

Axios encapsulation

  • Each developer has its own custom of wrapping Axios. Here is just configuring the following configuration files based on the prefixes used for different environment variables, implementing different local development mocks, and online proxies.
  • After the configuration is complete, local interface requests are prefixed with /mock and online environment requests are prefixed with/API
     const ENV_PARAMS = import.meta.env; // This is Vite's official guide to getting environment variables

     /** * Determine whether the production environment or the local environment * the production environment uses/API prefix * the local environment uses /mock prefix */
     export const getBaseUrl = (): string= > {
       const { DEV, VITE_DEV_API, VITE_PRD_API } = ENV_PARAMS;

       return DEV ? VITE_DEV_API : VITE_PRD_API;
     };

   
     const axios = Axios.create({
       baseURL: getBaseUrl(),
       timeout: 1000});Copy the code

Relative path – Package configuration

  • In actual development, the project is packaged into the dist folder and handed over to the back-end deployment, with the packaged backend resource file being a root path reference by default. Then sometimes relative path resource references are required
  • Example Set the alias resolve.alias of the file system path
import { resolve } from 'path' export default defineConfig({ resolve: { alias: { '@': resolve('./src') } }, base: './', // package path})Copy the code

Configure Mock data, domain proxy, browser compatibility, and JSX syntax support

  • Mock plugin configuration: viet-plugin-mocker
  • Mock data typically comes in two forms: Json data format (corresponding to GET requests); One is POST request, need to configure js file, view POST request configuration
  • How do I configure a domain name proxy
  • How to do browser compatibility
  • Note the Vite package command: change it to Vite build; The default “VUE-tsc –noEmit && vite build” will give an error
  • The vite. Config. ts configuration file is as follows
import { defineConfig, UserConfigExport } from "vite"; import vue from "@vitejs/plugin-vue"; import vueJsx from "@vitejs/plugin-vue-jsx"; import legacy from "@vitejs/plugin-legacy"; import viteMocker from "vite-plugin-mocker"; import { resolve } from 'path' export default defineConfig({ resolve: { alias: { '@': resolve('./src') } }, base: './', // plugins: [vue(), vueJsx(), // Configure JSX syntax legacy({// configure browser compatibility, support IE version 11 and above targets: ["ie >= 11"], additionalLegacyPolyfills: ["regenerator-runtime/runtime"],}), viteMocker({// configure Mcok data // mock file root dir: "/mocks", // Mock request route matching pattern: "Mock ", // Mock: delay: [0, 200],}),], server: {proxy: {// Configure domain name proxy "/ API ": {target: "http://jsonplaceholder.typicode.com", changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), }, }, }, });Copy the code