vue3+ts+vite踩坑小记

一.生产环境去掉console.log实现

①npm i terser

②在vite.config.js里面

build: {  //打包配置
      // 生产环境取消 console
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      },
    },

二.配置全局路径

resolve: {
      alias: {
        "@": resolve(__dirname, "./src"),
      },
    },

 三.run build报js文件类型的错误

①检查package.json文件的scripts的build命令，是否包含ts检查，可以直接修改为vite build

②tsconfig.json中加入

"compilerOptions": {
    "allowJs": true,
  },

四.引入

①如果使用了

let payInfo = reactive(computed(() => {

  return globalStore.payInfo

}));

那么对payInfo的取值，是在payInfo.value里面

②对于动态img的加载

function getImg() {
  return new URL(`./imgs/${mainConfigData.value.img}.png`, import.meta.url).href;
}

 ③lodash的防抖的引用

import _ from "lodash";

const onlinePay = _.debounce(codeModel, 200);
function codeModel() {
  globalStore.setPayWay("online");
}

④对节点的获取

const qrCodeRef = ref(null);  

let childNodes = qrCodeRef.value.childNodes;        //取到下一级节点需要加.value