天哪 - 调试我的调试环境。这太令人发狂了。
我正在使用Vue v2,并在我的应用程序中使用vuetify。以下是一个完整的vue.config.js配置,它解决了我的问题。
// vue.config.js file
const path = require('path')
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: [
'vuetify'
],
configureWebpack: config => {
if (process.env.NODE_ENV === 'development') {
// See available sourcemaps:
// https://webpack.js.org/configuration/devtool/#devtool
config.devtool = 'eval-source-map'
// console.log(`NOTICE: vue.config.js directive: ${config.devtool}`)
config.output.devtoolModuleFilenameTemplate = info => {
let resPath = path.normalize(info.resourcePath)
let isVue = resPath.match(/\.vue$/)
let isGenerated = info.allLoaders
let generated = `webpack-generated:///${resPath}?${info.hash}`
let vuesource = `vue-source:///${resPath}`
return isVue && isGenerated ? generated : vuesource
}
config.output.devtoolFallbackModuleFilenameTemplate =
'webpack:///[resource-path]?[hash]'
}
},
})
dev tools
工具来获取那个列表?看起来像是缓存文件的列表,因此它显示了您代码的所有旧版本。network
选项卡并重新加载页面,则应该会看到浏览器下载的所有资源列表。选择 js
过滤器,然后您应该能在列表中找到您的 vue js bundle
(由 webpack 制作)。我在项目中遇到了许多开发人员,他们不知道有官方的浏览器扩展程序可以用于调试Vue、Router、VueX等。
偶然看到这个问题促使我发布这个救命链接,为那些来到这里但错过了这个必要工具的人提供帮助: