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

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

24 голосов
/ 14 мая 2019

Я играю с проектом 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

...