1.vite配置drop_console无效

image.png
解决方案: 因为vite2.5.7之前的版本 build.minify 的值默认为 ‘terser’, 所以能够直接配置, 2.5.7之后的版本, build.minify的默认值变为了’esbuild’造成了 drop_console: true无效的情况;
build.minify 设置为 false 可以禁用最小化混淆，或是用来指定使用哪种混淆器。默认为 Esbuild，它比 terser 快 20-40 倍，压缩率只差 1%-2%
(
esbuild 是一个用 go 语言写的 javascript, typescript 打包工具，速度比 webpack 快 100 倍以上
)

2.vue3.x路由重定向:

  1. //路由重定向也是通过routes配置来完成,下面是从/a 重定向到/b 
  3. const routes = [{ path: '/home', redirect: '/' }]
  6. //重定向的目标也可以是一个命名的路由：
  7. const routes = [{ path: '/home', redirect: { name: 'homepage' } }]
  10. 甚至是一个方法，动态返回重定向目标：
  11. const routes = [
  12.   {
  13.     // /search/screens -> /search?q=screens
  14.     path: '/search/:searchText',
  15.     redirect: to => {
  16.       // 方法接收目标路由作为参数
  17.       // return 重定向的字符串路径/路径对象
  18.       return { path: '/search', query: { q: to.params.searchText } }
  19.     },
  20.   },
  21.   {
  22.     path: '/search',
  23.     // ...
  24.   },
  25. ]

image.png

3.vue3.x注入全局SCSS文件

在vite.config.ts文件中

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import path from "path"
  5. export default defineConfig({
  6.   base: "/user/", // 开发或生产环境服务的 公共基础路径
  7.   css:{
  8.     //css预处理
  9.     preprocessorOptions:{
  10.       scss:{
  11.         //引入var.scss全局预定义变量
  12.         additionalData:'@import "./src/style/mixins.scss";'
  13.       }
  14.     }
  15.   },
  16.   mode: 'production'
  17. });

4.vue3.x 获取网址?后面的路由参数

  1. import { useRouter } from 'vue-router'
  3. setup(){
  4.     const router = useRouter();
  5.   router.currentRoute.value.query // 这就是获取网址?后面的路由参数;
  6. }

5.vue3.x 引入全局组件

在main.ts文件中引入这个组件 用.componet在全局注册

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. // 引入router
  4. import router from './router'
  5. // 引入store
  6. import store from './store'
  7. // 引入 ElementPlus
  9. import UnderlineTitle from '@/components/UnderlineTitle.vue'
  10. import 'element-plus/dist/index.css'
  13. createApp(App)
  14.   .use(router)
  15.   .use(store)
  16.   .component('UnderlineTitle', UnderlineTitle)
  17.   .mount('#app')

6.nvm的安装 安装完Node版本之后一直报错乱码的问题

1、安装问题: 需要把跟node相关的文件和环境变量删除干净;
2、切换报错的问题：使用管理员终端可以进行切换；（用普通终端切换会报错）
image.png

7.关于在vite+vue3项目中使用可选链和双问号，和babel扩展

1、可选链和双问号只在高版本中的浏览器支持，低版本是不支持的；
2、vite暂不支持babel扩展;