vue3+ ts+vite+tailwindcss+pinia 各种报错以及解决办法

1.Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

For more details, see 

解决： vite.config.ts 文件

export default defineConfig({
  // Static Resource Base Path base: './' || '',
  base: process.env.NODE_ENV === "production" ? "./" : "/",
  plugins: [vue(), eslint(), createSvgIconsPlugin({
    // 指定要缓存.svg文件的文件夹
    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
    // Specify symbolId format 
    symbolId: 'icon-[dir]-[name]',
  }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      pinia: path.resolve(__dirname, "./node_modules/pinia"),
      "@TUIRoom": path.resolve(__dirname, "src/TUIRoom"),
    },
  }, 
  
  
    define: {
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
    },
    // Solve the problem of infinite page refresh after whistle proxy
    hmr: {
      protocol: "ws",
      host: "127.0.0.1",
    },
  },
});

2.单独编写 css 文件 css文件不提示问题解决

//在用户设置 首选项 setting.json文件中 添加   "*.css": "css"
"files.associations": {
    "pages.json": "jsonc",
    "manifest.json": "jsonc",
    "*.nvue": "vue",
    // 解决 单独 css文件编写不提示问题
    "*.vue": "vue",
    "*.css": "css"
  },

3.使用动态路径引入图片地址，打包线上不正常显示问题，vite处理静态资源文件：

vite官方文档：vite官方文档

// 这个写法是正确的 
function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}
//这个是错误的 解析不了
// Vite 不会转换这个 （uniapp 项目之前用过这个写法，正常，但是这个项目不正常，不可用）
const imgUrl = new URL(imagePath, import.meta.url).href
 //官方给的解释： 在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。然而，这个 URL 字符串必须是静态的，这样才好分析。否则代码将被原样保留、因而在 build.target 不支持 import.meta.url 时会导致运行时错误。

4.node 版本切换 和不匹配 （各个项目使用的版本冲突）使用 nvm 搜索 nvm 使用教程以及配置 终端输入 然后查看 node 版本号。

项目报错：

 INFO  Starting development server...
95% emitting ThemeColorReplacerExtracted theme color css content length: 893
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at getHash (/Users/baogukeji/mypro/Wallet/Wallet-web/node_modules/webpack-theme-color-replacer/src/replaceFileName.js:17:21)
    at replaceFileName (/Users/baogukeji/mypro/Wallet/Wallet-web/node_modules/webpack-theme-color-replacer/src/replaceFileName.js:10:68)
    at getFileName (/Users/baogukeji/mypro/Wallet/Wallet-web/node_modules/webpack-theme-color-replacer/src/Handler.js:33:40)
    at Handler.handle (/Users/baogukeji/mypro/Wallet/Wallet-web/node_modules/webpack-theme-color-replacer/src/Handler.js:23:26)
    at /Users/baogukeji/mypro/Wallet/Wallet-web/node_modules/webpack-theme-color-replacer/src/index.js:22:26
    at _next1 (eval at create (/Users/baogukeji/mypro/Wallet/Wallet-web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at eval (eval at create (/Users/baogukeji/mypro/Wallet/Wallet-web/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:29:1)
    at /Users/baogukeji/mypro/Wallet/Wallet-web/node_modules/copy-webpack-plugin/dist/index.js:91:9 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.0 怎么解决
是 node版本号不匹配

解决第一个报错：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash


nvm install 16
nvm use 16
//你需要的版本号

npm i

我的报错：

baogukeji@baogukejideMacBook-Pro-3 Wallet-web % curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 15916  100 15916    0     0  11173      0  0:00:01  0:00:01 --:--:-- 11200
=> nvm is already installed in /Users/baogukeji/.nvm, trying to update using git
=> => Compressing and cleaning up git repository

=> nvm source string already in /Users/baogukeji/.bash_profile
=> bash_completion source string already in /Users/baogukeji/.bash_profile
=> Close and reopen your terminal to start using nvm or run the following to use it now:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
baogukeji@baogukejideMacBook-Pro-3 Wallet-web % nvm install 16
zsh: command not found: nvm

运行以下命令加载 nvm：
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
nvm --version 验证 nvm 是否正确安装并可用。