如何修改 Vite 配置以显示源码?

vite vue3 无法出现源码,如何修改配置,目前vite.config.ts配置如下


export default defineConfig(({command,mode})=>{
    const env = loadEnv(mode, process.cwd())
    return{
        server: {
            host: '0.0.0.0',
            port: 8000,
            proxy: {
                [env.VITE_APP_BASE_API]: {
                    target: env.VITE_SERVE,
                    changeOrigin: true,
                    rewrite: path => path.replace(env.VITE_APP_BASE_API, '')
                }
            }
        },
    sourcemap: true,
        base: './',
        plugins: [
            vue(),
            VueSetupExtend(),
            AutoImport({
                resolvers: [ElementPlusResolver()]
            }),
            Components({
                resolvers: [ElementPlusResolver()]
            })
        ],
    css: {
      postcss: {
        plugins: [
          require("tailwindcss"),
          require("autoprefixer"),
        ]
      }
    },
        optimizeDeps: {
            include: ['schart.js']

        },
        build: {
            assetsDir: 'static',
        }
    }
})

打断点后发现出现的并非源码,sourcemap勾选是下面这样的(使用vscode打开,vscode的断点也是下面这样的)
image.png
不勾选是下面这样的,但仍然是不是源码
image.png

vscode lanuch.json配置如下

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
阅读 324
1 个回答

提供一个我用 vscode 编辑器调试的配置

// .vscode/launch.json
{
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
   }

url 是应用启动后的路径。然后按 F5 启动调试,会在源码中触发断点

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏