The project vite1.0 upgrading to vite2.0 encountered some error, below is finishing some solution:

Warning: Duplicate key “server” in object literal

 vite.config.js:67:4: warning: Duplicate key "server" in object literal
    67│ │ server: {╵ ~~~~~~ vite.config.js:29:4: note: The original "server" is here
    29│ server: {╵Copy the code

Why: There are multiple servers in vite. Config. js

Error: Cannot find module ‘dotenv’

failed to load config from /Users/duoduo/react-new/tianjin-data-web/vite.config.js
error when starting dev server:
Error: Cannot find module 'dotenv'
Require stack:
Copy the code

Install NPM install dotenv

No loader is configured for “.vue”

src/main.ts:19:22: error: No loader is configured for ".vue" files: src/components/v-login-box.vue
    19 │ import vLoginBox from "/@/components/v-about.vue"╵ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~Copy the code

Solution: the vite. Config. Js the alias “/ @ /” instead of “@”, and global search “/ @ /”, replace with “@ /”

resolve: {
    alias: {
        "@": path.resolve(__dirname, "./src"),
        "public": path.resolve(__dirname, "./public"),}},Copy the code

Error 404: proxy failed to take effect. Add host and POST to server

server: {
    port: process.env.VITE_PORT,
    // Whether to open automatically in the browser
    open: true.// Whether to enable HTTPS
    https: false.proxy: {
        '/api': {
            target: 'http://localhost:3333/'.changeOrigin: true.rewrite: (pathStr) = > pathStr.replace('/api'.' ')}}},Copy the code

5. Package build images to production environment, font resource path 404

If the problem is not solved, then check whether the image path is placed in public. Static resources must be placed in public

build: {
    minify: "esbuild".assetsDir: "".outDir: `./dist/${process.env.VITE_ENV}`,},Copy the code

Finally, put the total vite.config.js configuration

const fs = require("fs");
import path from "path";
// Dotenv is a zero-dependent module that loads environment variables from the.env file into process.env
const dotenv = require("dotenv");
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
const envFiles = [
    /** default file */
    `.env`./** mode file */
    `.env.${process.env.NODE_ENV}`,];for (const file of envFiles) {
    const envConfig = dotenv.parse(fs.readFileSync(file));
    for (const k inenvConfig) { process.env[k] = envConfig[k]; }}export default defineConfig({
    plugins: [vue()],
    base: ". /".server: {
        port: process.env.VITE_PORT,
        // Whether to open automatically in the browser
        open: true.// Whether to enable HTTPS
        https: false.proxy: {
            '/api': {
                target: 'http://localhost:3333/'.changeOrigin: true.rewrite: (pathStr) = > pathStr.replace('/api'.' ')}}},resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src"),
            "public": path.resolve(__dirname, "./public"),}},optimizeDeps: {
        include: [
            "element-plus"."element-plus/lib/locale/lang/zh-cn"."dayjs/locale/zh-cn",]},build: {
        / / compression
        minify: "esbuild".assetsDir: "".outDir: `./dist/${process.env.VITE_ENV}`,}});Copy the code