vue3怎样设置一个可调试的sourceMap

vue3怎样设置一个可调试的sourceMap

我看官网设置开发环境的sourceMap的方法是(eval-source-map是我自己选择的):

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'eval-source-map'
  }
})

但是我设置之后,源代码仍然是编译之后的:

https://img1.sycdn.imooc.com//climg/62294e0f0921bfbe13640389.jpg

于是我看老师的源代码,居然没有vue.config.js,但是运行起来可以看见可调式的源代码:

https://img1.sycdn.imooc.com//climg/62294ea00915b32408230376.jpg

于是我把vue.config.js删除了,结果还是没有可调式的源代码,我用的vue 3.2,请老师帮帮我,vue3怎样设置一个可调试的sourceMap?(我是用@vue/cli新建的项目,想重新开始探索整个项目的流程)

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好

假如你使用 vue-cli 创建的项目,vue run serve 开发模式是自带 sourceMap 的,不需要添加 vue.config.js 

请看截图https://img1.sycdn.imooc.com//climg/62295fe609e65ac819060816.jpg

这是我刚创建的新项目,没有做任何的修改。

注意有多个同名文件,代表编译前的还是编译后的。

你可以重新创建一次做个实验看看。

  • 重新做了实验,我在@vue/cli上的操作步骤如下图:

    https://img1.sycdn.imooc.com//climg/622bd233089e11ea19841056.jpg

    https://img1.sycdn.imooc.com//climg/622bd233087351e219641067.jpg

    但是最接近原始代码的一个HelloWold.vue都没有template和style部分,只有script部分:

    https://img1.sycdn.imooc.com//climg/622bd34e087aa11507910331.jpg

    下载视频          
    2022-03-12 06:55:21
  • 张轩 回复 提问者 他门说这就是人生 #2

    同学你好 请问你的 vue-cli 的版本是什么,我可以用相同的版本试一下

    2022-03-12 09:58:41
  • 他门说这就是人生 提问者 回复 张轩 #3
    C:\Users\gaoji\Desktop>vue --version
    @vue/cli 5.0.1

    我的版本是5.0.1

    老师如果愿意,也可以到QQ或QQ群找我,可以远程用我的电脑看,我的QQ号是1040147371。


    2022-03-12 10:18:30
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师