te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Vue CLI sourcemaps to style part of vue component file - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Vue CLI sourcemaps to style part of vue component file - Stack Overflow

    javascript - Vue CLI sourcemaps to style part of vue component file - Stack Overflow

    programmeradmin4浏览0评论

    I'm playing with Vue CLI project. I have configured startup project, set some development changes like those:

    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-piler": "^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' }
        ]
    ]
}

    But sourcemaps to vue files are still generated wrongly (to scss files works ok).

    After clicking href to vue ponent

    Note:

    • lot of versions of same file in webpack://./
    • only part that is in tag is visibile in source editor (maybe this is a cause)
    • file from mounted filesystem workspace is not used

    And this is how original file looks like - it is possible to edit it via Chrome devtools

    Is it possible to fix that so also element inspector tab (style) will provide proper source target?

    EDIT 1
    Simplest setup:
    Install Vue CLI (3.7)
    Add my vue.config.js (to enable sourcemaps)
    Run npm run serve

    EDIT 2
    Same for Vue CLI 3.5

    I also created repo with test project, but like I wrote it is just startup project with my config.

    EDIT 3 Vue-cli github issue

    I'm playing with Vue CLI project. I have configured startup project, set some development changes like those:

    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-piler": "^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' }
        ]
    ]
}

    But sourcemaps to vue files are still generated wrongly (to scss files works ok).

    After clicking href to vue ponent

    Note:

    • lot of versions of same file in webpack://./
    • only part that is in tag is visibile in source editor (maybe this is a cause)
    • file from mounted filesystem workspace is not used

    And this is how original file looks like - it is possible to edit it via Chrome devtools

    Is it possible to fix that so also element inspector tab (style) will provide proper source target?

    EDIT 1
    Simplest setup:
    Install Vue CLI (3.7)
    Add my vue.config.js (to enable sourcemaps)
    Run npm run serve

    EDIT 2
    Same for Vue CLI 3.5

    I also created repo with test project, but like I wrote it is just startup project with my config. https://github./l00k/vue-sample

    EDIT 3 Vue-cli github issue https://github./vuejs/vue-cli/issues/4029

    • javascript
    • vue.js
    • webpack
    • source-maps
    Share Improve this question edited May 23, 2019 at 20:20 l00k asked May 14, 2019 at 10:11 l00kl00k 1,5451 gold badge19 silver badges29 bronze badges 14
    • Try using the vue debugger chrome plugin. It also works wonders for debugging Vuex for example. – Olaf Commented May 14, 2019 at 10:17
    • @Devilsrade as you can see in screens I'm already using vue plugin, but it is not enough – l00k Commented May 14, 2019 at 11:46
    • I changed my vue.config to same as yours, but the problem is not present. My href in styles is not MyComponent? [sm].vue it's just MyComponent.vue which takes me to full source. Maybe versions? I have Vue 2.6.6 & vue-clI-service 3.5.0. – user8745435 Commented May 17, 2019 at 0:15
    • Also href is taking me to localhost part of tree (not webpack://). – user8745435 Commented May 17, 2019 at 0:18
    • 1 I haven't looked at the issue of saving changes, but it seems to the issue of inplete source display is specific to scss/sass loader. I tried a bunch of alternate configs and also different devtools (suggested by Linus Borg) but nothing I tried fixes it yet. – user8745435 Commented May 19, 2019 at 21:16
     |  Show 9 more ments

    2 Answers 2

    Reset to default 3

    So far I did not found solution - at least using Vue CLI.
    But I have found workaround.

    But first of all - whole problem is not about Vue CLI but it is something with vue-loader-plugin IMO. I think so because while using clean setup with vue and webpack I also see that problem.

    I have found out that it is related to wrong sourcemap generated for those parts of Vue file and Source for those part is strip to only content of those tags. That is probably why browser could not map it to source. Also path to source file in sourcemap is wrong.

    I have prepared additional loader for webpack which fixes those sourcemaps.
    Check sm-fix-loader in repo below.
    I dont know does it fix all issues, but at least in my cases it works awesome.

    What works ok:
    Build NODE_ENV=development webpack
    SCSS inline (in vue file) and in separate file <style src="...">
    TS / JS inline (in vue file) and in separate file <script src="...">

    HRM NODE_ENV=development webpack-dev-server --hotOnly
    SCSS inline (in vue file) and in separate file <style src="...">
    It also reloads styles without reloading page itself :D
    TS / JS inline (in vue file) and in separate file <script src="...">

    Repo with working example:
    https://github./l00k/starter-vue

    Step by step solution:

    1. Enable css sourcemaps in vue.config.js: 
    module.exports = {
  css: {sourceMap: true},

    1. Move all scss from ponents to separate files, collate them in index.scss and import index.scss via App.vue. This will solve lots of problems with vue-css-sourcemaps (caused by Webpack, Devtools and vue-cli), and somewhat simplify your workflow. If you need scoping, scope manually via #selectors (Importing SCSS file in Vue SFC ponents without duplication with Webpack)

    2. To go further, you may need to set up CSS extraction for node_modules only, as another mysterious bug ruins styling as soon as you touch any css in devtools:

    devtool: 'cheap-source-map',
    plugins: process.env.NODE_ENV === 'development' ?
      ([new MiniCssExtractPlugin()]) : [],
    module: {
      rules: [
            process.env.NODE_ENV === 'development' ?
          (
            {
              // test: /node_modules/,
              test: /node_modules\/.+\.scss/,

              use: [
                MiniCssExtractPlugin.loader,
                {
                  loader: 'css-loader',
                  options: {
                    importLoaders: 2,
                    sourceMap: true
                  }
                },
                {
                  loader: 'postcss-loader',
                  options: {
                    plugins: () => [require('autoprefixer')],
                    sourceMap: true
                  }
                },
                {
                  loader: 'sass-loader',
                  options: {sourceMap: true}
                }
              ]
            }) : {}
      ],
    }

    If you extract all css, you'll loose hmr (hot module reloading = reload on edit), but since you don't really edit scss in your node_modules, you extact only them.

    All in all, this fixed all vue css-related sourcemap issues with Devtools and enabled hot-editing right in browser.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论