关于vue3+vite+ts项目搭建配置

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、创建项目

npm init vue@latest

二、路由配置修改

1、基础路由

import { createRouter, createWebHistory } from 'vue-router'
import  type {RouteRecordRaw} from  "vue-router"  //路由ts类型
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),//import.meta.env.BASE_URL
  routes
})

export default router

2、路由守卫配置

//新建文件routerGuard
import  router  from  "@/router/index"

router.beforeEach((to,from,next)=>{
   console.log(to,from,next)
   next()
})

router.afterEach(()=>{
})


//将路由收文文件在main.js中执行
import  "@/router/routerGuard"

三、pinia配置修改

//创建store-namespace文件为所有模块的存储名
//store命名集中命名
export  enum Name {
  counter = "counter"
}


//创建模块ts文件
import { defineStore } from 'pinia'
import {Name} from  "../store-namespace"

export const useCounterStore =  defineStore(Name.counter,{
  state(){
      return {
      }
  },
  getters:{
  
  },
  actions:{

  },
})

四、生产与开发环境配置

根目录下创建.env.production(生产环境)与 .env.development(开发环境)文件

+ 文件中配置变量以VITE_开头, 后面接变量名  例如  VITE_ENV = "development"   ,ENV为变量名
 例如:
 #环境
VITE_ENV = "development"

#基地址
VITE_APP_BASE_API = "/api"

#地址
VITE_URL = ""

+ 修改project命令, 在dev运行命令后加入 --mode 文件名
 例如 "serve": "vite --mode development",   //运行时自动读取 .env.development文件

+ build打包时默认是读取.env.production文件的所以不用配置

+ 变量使用
在vue.config.ts文件以外的读取
import.meta.env[变量名]  ,例如  import.meta.env["APP_BASE_API"] 
在vue.config.ts中读取
 1. 引入loadEnv
 import { defineConfig, loadEnv } from 'vite'
 2.修改默认导出,变为函数形式,并解构出mode,使用loadEnv(mode,process.cwd()) 获取所有变量
 export default ({ mode }: any) => {
 
 console.log(loadEnv(mode,process.cwd()))  //获取到找整个环境文件的所有变量

  return defineConfig({
      resolve: {
      alias: {
        '@': resolve(__dirname, 'src'),
      },
    },
   })   
}

五、其余小配置

1、配置自启与Network

//vite.config.ts中
export default defineConfig({
  server:{
    port:2023,  //端口号
    host:true,  //可以设置固定的值或者是布尔值, 设置后,才会有NetWork
    open:true  //运行自动打开浏览器
  }
})
//注意: 更改后要重启哦

2、自动引入组件和vue方法的插件

可用于vue的ref等方法自动引入, 组件自动引入, element puls等组件按需引入

npm install -D unplugin-vue-components unplugin-auto-import   //下载插件
npm        

//vite.config.js中配置
import AutoImport from 'unplugin-auto-import/vite'    //自动引入api
import Components from 'unplugin-vue-components/vite'  //按需自动引入组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

//在plugins配置中配置
export default () => {
  return defineConfig({
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],  //对于element puls的配置
        imports: [
        'vue', //自动引入的vue的ref等方法
        'vue-router',   //引入useRoute等方法
        {            //对于vue-router的type的扩展,配置后可以直接使用
          from: 'vue-router',
          imports: ['RouteLocationRaw',],
          type: true,
        },],
        dts: 'src/auto-imports.d.ts'
      }),
      Components({
        resolvers: [ElementPlusResolver()],   //对于element puls的配置
      }),
    ],
  })
}

//使用:
//在此处配置element plus后, 可以直接使用,仁和地方都不用再引入,自动按需引入的,在components.d.ts中可以看到生成文件
//import {ref} from  "vue"这种引入也可省略, 直接使用即可, 具体引入的类型在src/auto-imports.d.ts文件中可见
//注意:修改vite.config.ts文件后需要重启

3、格式化插件prettier和忽略文件

vscode需要下载prettier的插件

根目录下创建.prettierrc文件

{
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

根目录下格式化忽略文件创建 .prettierignore文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*

配置整体格式化命令, 运行后自动整体格式化,package.json中配置

 "script":{
  "prettier ": "prettier --write ."
}

运行命令  npm   run   prettier 

4、跨域代理配置

server: {
    proxy: {
      '/api': {
        target: 'xxxxx',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  }

5、css配置

配置一个入口, 其余css引入入口文件, css变量可全局使用

//在vite.config.ts中添加css配置项
export default defineConfig({
   css: {
      // css预处理器
      preprocessorOptions: {
        scss: {
          // 引入 index.scss 这样就可以在全局中使用 index.scss中预定义的变量了,这里我是用的是sass
          // 给导入的路径最后加上 ; 
          additionalData: '@import "@/assets/style/index.scss";'   //入口文件地址
        }
      }
    },
})

6、vite.config.ts配置展示

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'    //自动引入api
import Components from 'unplugin-vue-components/vite'  //按需自动引入组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { resolve } from "path"; // 引入方法

// https://vitejs.dev/config/
export default () => {
  return defineConfig({
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
        imports: ['vue', 'vue-router', {
          from: 'vue-router',
          imports: ['RouteLocationRaw',],
          type: true,
        },],
        dts: 'src/auto-imports.d.ts'
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src'),
      },
    },
    css: {
      // css预处理器
      preprocessorOptions: {
        scss: {
          // 引入 index.scss 这样就可以在全局中使用 index.scss中预定义的变量了
          // 给导入的路径最后加上 ; 
          additionalData: '@import "@/assets/style/index.scss";'
        }
      }
    },
    server: {
      port: 3003,
      host: true,
      open: true
    }
  })
}