Not in Vue template path.resolve

[Carson-czl]

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

[github-actions[bot]]

Hello @Carson-czl. Please provide a online reproduction by codesandbox or a minimal GitHub repository. Issues labeled by need reproduction will be closed if no activities in 3 days.

[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

那其他模块怎么处理

[Carson-czl]

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

thank you! I'll try (感谢大佬)

[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

[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

那其他模块怎么处理

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

[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