Vue3 + Ts + Vite + ElementPlus项目搭建过程中的一些问题总结

前端小菜鸡yy

已于 2024-03-20 20:05:10 修改

阅读量159

点赞数

分类专栏： vue3+ts+vite学习 Vue常用功能实现文章标签：前端 javascript vue.js

于 2023-04-12 18:10:13 首次发布

本文链接：https://blog.csdn.net/qq_45104829/article/details/130101350

版权

vue3+ts+vite学习同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Vue常用功能实现

10 篇文章 0 订阅

订阅专栏

搭建方式：

1.通过vite构建

npm init vite@latest
在这里插入图片描述

2.通过vue脚手架构建

这种方式可供选择的配置项会更全面
npm init vue@latest
在这里插入图片描述

以下都是我新建项目过程中遇到的一些问题，解决方法只列出了我用过的某一种，有些问题也有其他解决办法。

1.找不到模块“./App.vue”或其相应的类型声明。

找到vite.env.d.ts文件,加入以下代码：

declare module '*.vue' {
	   import type { DefineComponent } from 'vue'
	   const component: DefineComponent<{}, {}, any>
	   export default component
}

2.按需/自动引入Element Plus 以及Element Plus 图标

下载：element plus
npm install element-plus
下载自动引入插件
npm install -D unplugin-vue-components unplugin-auto-import
图标自动引入的插件
npm i unplugin-icons -D
vit.config.ts中配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import IconResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
export default defineConfig({
  plugins: [vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }), Components({
        resolvers: [ElementPlusResolver(),
        IconResolver({
            enabledCollections: ['ep'],
        })],
    }),
    Icons({
        autoInstall: true,
      }),
  ],
})

自动生成了auto-import.d.ts文件和components.d.ts文件
参考链接：https://blog.csdn.net/W_Zhulin/article/details/124553625

3.env 环境配置（development和production）

src同级目录下新建.env.development和 .env.production文件；

# 开发环境请求路径
VITE_BASE_URL = 'http://ip:port'
VITE_MODE = 'development'
password = '122' //例如这个变量用import.meta.env打印是看不到的

# 生产环境请求路径
VITE_BASE_URL = 'http://ip:port'
VITE_MODE = 'production'

还可以配置一些项目中需要用到的变量，为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

main.ts中取值：
import.meta.env.设置的变量
.html文件中取值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue3+TS+Vite--%VITE_MODE%</title> //vue3+TS+Vite--development
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

vite.config.ts中取值：
import.meta.env在此不能直接使用

import { ConfigEnv, defineConfig ,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
const viteConfig =  defineConfig(({ mode, command })=>{
  const env = loadEnv(mode,process.cwd())
  return {
    server: {
      // open: true,//启动项目自动弹出浏览器
      port: 8000,//启动端口
      host: '0.0.0.0',
      proxy: {
        '/api': {
          target: env.VITE_BASE_URL,	//实际请求地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        },
      }
    }
  }
})
export default viteConfig

TypeScript 的智能提示
在env.d.ts 中：

/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多环境变量...
}
interface ImportMeta {
  readonly env: ImportMetaEnv
}

即如下提示：
在这里插入图片描述

默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式。
这意味着当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量
参考：vite官方文档

4. 项目启动后，无法通过ip地址访问，Network: use `--host` to expose

vite.config.ts 中添加：

server: {
     host: '0.0.0.0',
}

package.json中配置：在这里插入代码片

“scripts”: {
“start”: “vite --host 0.0.0.0”,
},

5.element Plus 引入message消息提示，样式不正确

如下:
在这里插入图片描述
解决方法：
在main.ts中引入import "element-plus/theme-chalk/el-message.css";

6.element Plus 默认为英文

解决方法：App.vue

<template>
  <el-config-provider :locale="locale">
    <router-view></router-view>
  </el-config-provider>
</template>
<script lang="ts" setup>
import { defineComponent } from 'vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
let  locale=zhCn
</script>

7. 简单打包配置[生产环境去掉console.log,以及配置不同环境打包命令和打包后的文件夹]

build: { 
      minify: "terser", 
      terserOptions: { 
        compress: { 
          drop_console: command === "build" && env.VITE_MODE === "production", 
          drop_debugger: command === "build" && env.VITE_MODE === "production" 
        } 
      },
      //生产环境和测试环境打包出口，或者在，.env.development中，配置VITE_MODE为打包出口
      outDir:env.VITE_MODE === "production"?'dist':'dist-test'
    },

完整配置 vite.config.ts

import { ConfigEnv, defineConfig ,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import IconResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

const viteConfig =  defineConfig(({ mode, command })=>{
const env = loadEnv(mode,process.cwd())
  return {
    plugins: [vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }), Components({
          resolvers: [// 自动注册图标组件
          IconResolver({
            enabledCollections: ['ep'],
          }),
          ElementPlusResolver()
        ],
      }),
      Icons({
        autoInstall: true,
      }),
    ],
    build: { 
      minify: "terser", 
      terserOptions: { 
        compress: { 
          drop_console: command === "build" && env.VITE_MODE === "production", 
          drop_debugger: command === "build" && env.VITE_MODE === "production" 
        } 
      },
      outDir:env.VITE_MODE === "production"?'dist':'dist-test'
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')//设置别名
      }
    },
    server: {
      // open: true,//启动项目自动弹出浏览器
      port: 8000,//启动端口
      host: '0.0.0.0',
      proxy: {
        '/api': {
          target: env.VITE_BASE_URL,	//实际请求地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        },
      }
    }
  }
})
export default viteConfig

8.axios请求的封装

import axios from 'axios';

// const service = axios.create({});
const service = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL, // 在请求中进行配置
  timeout: 50000, //超时时间
});

service.interceptors.request.use(
  (res) => {
    return res;
  },
  (error) => {
    console.log('request err');
    return Promise.reject(error);
  },
);

service.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    const status = error.response.status;
    const herf = window.location.origin;
    if (status === 401) {
      // window.location.replace(`${herf}/error/401.html`);
    } else if (status === 403) {
      // window.location.replace(`${herf}/error/403.html`);
    } else if (status === 504 || status === 408) {
    } else if (status === 500) {
    }
    return Promise.reject(error);
  },
);
/**
 * get方法对应get请求
 * @param url 请求时的路径
 * @param params 请求时携带的参数
 */
export function get(url: string, params?: object) {
  return new Promise<any>((resolve, reject) => {
    service
      .get(url, params)
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}
/**
 * post方法对应post请求
 * @param url 请求时的路径
 * @param params 请求时携带的参数
 * @returns
 */
export function post(url: string, params?: object,headers?:any) {
  return new Promise<any>((resolve, reject) => {
    service
      .post(url, params,headers)
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}

/**
 * put方法对应put请求
 * @param url 请求时的路径
 * @param params 请求时携带的参数
 * @returns
 */
export function put(url: string, params?: object) {
  return new Promise<any>((resolve, reject) => {
    service
      .put(url, params)
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}

/**
 * delete方法对应delete请求
 * @param url 请求时的路径
 * @param params 请求时携带的参数
 * @returns
 */
export function del(url: string, params?: object) {
  return new Promise<any>((resolve, reject) => {
    service
      .delete(url, params)
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}

/**
 * delete方法对应delete请求
 * @param url 请求时的路径
 * @param params 请求时携带的参数
 * @returns
 */
export function patch(url: string, params?: object) {
  return new Promise<any>((resolve, reject) => {
    service
      .patch(url, params)
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}

前端小菜鸡yy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3 + Ts + Vite + ElementPlus项目搭建过程中的一些问题总结

默认情况下，开发服务器 (dev 命令) 运行在。(开发) 模式，而 build 命令则运行在。还可以配置一些项目中需要用到的变量，下载：element plus。src同级目录下新建。
复制链接

扫一扫