Not in Vue template path.resolve

Describe the bug

import path from ‘path’ path exists, but empty object has no method to cause path.resolve error. But in vite.config.ts There is path.resolve

APP.vue

<template>
    <div></div>
</template>

<script lang="ts">
import path from 'path'
import {defineComponent} from 'vue'
export default defineComponent({
  name: 'App',
  setup() {
    console.log(path) // {}
    path.resolve('/user/info', './name') // error
  }
})
</script>

package.json

{
  "name": "vue3-vite-admin",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build:prod": "vue-tsc --noEmit && vite build",
    "build:stage": "vue-tsc --noEmit && vite build --mode staging",
    "serve": "vite preview"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "crypto-js": "^4.0.0",
    "element-plus": "^1.0.2-beta.35",
    "js-cookie": "^2.2.1",
    "normalize.css": "^8.0.1",
    "nprogress": "^0.2.0",
    "path-to-regexp": "^6.2.0",
    "vue": "^3.0.5",
    "vue-router": "4.0.5",
    "vuex": "4.0.0"
  },
  "devDependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@types/crypto-js": "^4.0.1",
    "@types/js-cookie": "^2.2.6",
    "@types/node": "^14.14.37",
    "@types/nprogress": "^0.2.0",
    "@typescript-eslint/eslint-plugin": "^4.19.0",
    "@typescript-eslint/parser": "^4.19.0",
    "@vitejs/plugin-legacy": "^1.3.1",
    "@vitejs/plugin-vue": "^1.1.5",
    "@vue/compiler-sfc": "^3.0.5",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.8.0",
    "prettier": "^2.2.1",
    "sass": "^1.32.8",
    "svg-sprite-loader": "^6.0.2",
    "svgo": "^2.2.2",
    "typescript": "^4.1.3",
    "vite": "^2.1.3",
    "vite-plugin-svg-icons": "^0.4.0",
    "vue-tsc": "0.0.16"
  }
}

vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import {svgBuilder} from './src/components/SvgIcon/svg-config'
import path from 'path'
/**
 * 脚手架配置 https://vitejs.dev/config/
 */
export default defineConfig((configInfo) => {
  console.log('模块信息', configInfo.mode)
  let base = './'
  let buildOutDir = 'dist'
  let minify = true
  switch (configInfo.mode) {
    case 'production':
      base = '/html/admin'
      buildOutDir += '/admin'
      minify = true
      break
    case 'staging':
      base = '/html/test'
      buildOutDir += '/test'
      minify = false
      break
  }
  return {
    plugins: [vue(), legacy(), svgBuilder('./src/icons/svg/')],
    resolve: {
      alias: [{find: '@', replacement: path.resolve(__dirname, 'src')}],
    },
    base: base, // 访问公共路劲
    build: {
      target: 'es2015', // 打包转es2015
      outDir: buildOutDir, // 打包地址
      assetsDir: 'static', // 静态资源
      minify: minify, // 是否压缩
    },
    server: {
      port: 9528, // 端口号
      open: false, // 是否自动打开浏览器
    },
    css: {
      preprocessorOptions: {
        scss: {
          //你的scss文件路径(只能在assets目录下)
          // additionalData: `@import "./src/assets/styles/element-variables.scss";`,
        },
      },
    },
    optimizeDeps: {
      include: [
        'crypto-js',
        'element-plus',
        'element-plus/lib/locale/lang/zh-cn',
        'vue',
        'axios',
        'js-cookie',
      ],
    },
  }
})

result code

https://codesandbox.io/s/agitated-chaplygin-tltqe?file=/src/App.vue Using the same code on vite can cause errors

[psaren]

path module only exsits on nodejs, it dose not exist on browser environment. If you want to use the path.resolve in browser，try browser-resolve！ You can see this relative comment

[JunyWuuuu91]

path module only exsits on nodejs, it dose not exist on browser environment. If you want to use the path.resolve in browser，try browser-resolve！ You can see this relative comment

那其他模块怎么处理

How to deal with other node side modules

you can use rollup-plugin-polyfill-node or https://github.com/ionic-team/rollup-plugin-node-polyfills

thks