Исходные карты Vue CLI для стилизации части файла компонента Vue - программирование

Исходные карты Vue CLI для стилизации части файла компонента Vue

Я играю с проектом Vue CLI. Я настроил автозагрузку проекта, установил некоторые изменения в разработке, например:

package.json

"dependencies": {
    "bootstrap": "^4.3.1",
    "core-js": "^3.0.1",
    "preload-it": "^1.2.2",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuetify": "^1.5.14",
    "vuex": "^3.1.1"
},
"devDependencies": {
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-pwa": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "fontello-cli": "^0.4.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-template-compiler": "^2.5.21",
    "vuetify-loader": "^1.2.2"
}

vue.config.js

module.exports = {
    configureWebpack: {
        devtool: process.env.NODE_ENV === 'development'
            ? 'inline-source-map'
            : false,
    },
    css: {
        sourceMap: process.env.NODE_ENV === 'development'
    }
}

babel.config.js

module.exports = {
    presets: [
        [
            '@vue/app',
            { useBuiltIns: 'entry' }
        ]
    ]
}

Но исходные карты для файлов vue по-прежнему генерируются неправильно (для файлов scss все в порядке).

sourcemap preview

После нажатия на ссылку href для добавления компонента

source tab

Примечание:

  • много версий одного и того же файла в веб-пакете://./
  • в редакторе исходного кода отображается только та часть, которая находится в теге (возможно, это и есть причина)
  • файл из рабочей области смонтированной файловой системы не используется

А вот так выглядит оригинальный файл - его можно редактировать через Chrome devtools enter image description here

Можно ли исправить это так, чтобы вкладка инспектора элементов (стиль) обеспечивала правильную исходную цель?

ОБНОВЛЕНИЕ 1
Простейшая настройка:
Установите Vue CLI (3.7)
Добавьте мой vue.config.js (чтобы включить исходные карты)
Запустите npm run serve
enter image description here

ОБНОВЛЕНИЕ 2
То же самое для Vue CLI 3.5

Я также создал репо с тестовым проектом, но, как я уже писал, это просто стартовый проект с моим конфигом. https://github.com/l00k/vue-sample

ОБНОВЛЕНИЕ 3 Vue-Cli GitHub выпускhttps://github.com/vuejs/vue-cli/issues/4029

4b9b3361

ОТВЕТЫ

Ответ 1

До сих пор я не нашел решения - по крайней мере, с помощью Vue CLI.
Но я нашел обходной путь.

Но прежде всего - вся проблема не в Vue CLI, а в IMU для vue-loader-plugin. Я так думаю, потому что, используя чистую настройку с vue и webpack, я также вижу эту проблему.

Я обнаружил, что это связано с неправильной исходной картой, сгенерированной для тех частей файла Vue и Источником для этих частей является раздевание только содержимого этих тегов. Вероятно, поэтому браузер не смог сопоставить его с источником. Также неверный путь к исходному файлу в исходной карте.

Я подготовил дополнительный загрузчик для веб-пакета, который исправляет эти исходные карты.
Проверьте sm-fix-loader в репо ниже.
Я не знаю, решает ли это все проблемы, но по крайней мере в моих случаях это работает потрясающе.

Что работает нормально:
Сборка NODE_ENV=development webpack
Встроенный SCSS (в файле vue) и в отдельном файле <style src="...">
Встроенный TS/JS (в файле vue) и в отдельном файле <script src="...">

HRM NODE_ENV=development webpack-dev-server --hotOnly
Встроенный SCSS (в файле vue) и в отдельном файле <style src="...">
Он также перезагружает стили без перезагрузки самой страницы: D
Встроенный TS/JS (в файле vue) и в отдельном файле <script src="...">

Репо с рабочим примером:
https://github.com/l00k/starter-vue