使用了vux-loader后，在chrome上debug，查看到的.vue文件，每条语句前的空格都没有了

配置如下

module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui', 'progress-bar', 'duplicate-style', {
name: 'i18n',
vuxStaticReplace: false,
staticReplace: false,
extractToFiles: './src/locales/components.yml',
localeList: ['en', 'zh-CN']
}]
})
使用了vux-loader后，在chrome上debug，查看到的.vue文件，每条语句前的空格都没有了。但是js文件正常。

vux-loader的版本1.1.0。

例如，在chrome查看一个.vue文件：

import XButton from 'vux/src/components/x-button/index.vue'
import XHeader from 'vux/src/components/x-header/index.vue'

export default {
name: 'recoverpwd',
components: {
XButton,
XHeader
},
data () {
return {
msg: ''
}
},
methods: {
fetchData: function () {
let login = this.$route.params.login
this.msg = this.$t('msgAskAdminResetPassWithArg', {login: login})

},
Login: function () {
this.$router.push({ name: 'login' })
}
},
created: function () {
this.fetchData()
}
}

如果使用配置：
module.exports = webpackConfig
则在chrome短查看.vue文件的语句前面空格是被保留的。

目前会有这样的问题，原因是正则匹配需要，后面重写 parser 后会修复。

@airyland

@airyland

thanks, 这么快就给出了回复。这个问题其实不会太大，但是有一个跟这个相关的问题，影响特别大，会导致在vscode中通过chrome debugger调试时，.vue文件里的断点错位。

主要有两个原因，第一，vue-loader把template和i18n给去掉了，但是正确的做法应该是，内容去掉，但是保留同样数目的空行。否则断点错位。

第二，import { Group } from 'vux' 好像会翻译成两行，这样也会导致断点错位。不过这个问题，比较好避免，我使用多行写import语句就可以避免这个问题，例如： import { Group
} from 'vux'

谢谢反馈，接下来版本会保留相同空行并且保证解析结果和原来行数一致。

补充一个绕过第一点原因的方法：
把js从.vue文件中提取出来，放到一个单独的js文件中。

例如：
Login.vue 文件
...

...

loginimpl.js 文件
import {
XSwitch,
Alert,
Group,
XInput,
XButton,
XHeader } from 'vux'
...
export default {
name: 'login',
components: {
XSwitch,
Alert,
...

使用airyland/vux2模板创建的项目，现在在devtool上完全无法定位到vue源码：

vux-loader版本是1.1.28。
除非将eval-source-map改为cheap-module-eval-source-map
此时虽然能看到源码，但是症状与主楼描述一样，没有空格，非常影响调试体验。
这个问题在vux文档上完全没有提及，是我在技术选型时遇到的重大障碍，希望能够尽快解决。

vux-loader/src/libs/import-parser.js

Lines 94 to 112 in 780e3aa

    
           function trimLine (str) { 
        
             let isImport = false 
        
             let list = str.split('\n') 
        
             for (let i = 0; i < list.length; i++) { 
        
               let currentLine = trim(list[i]) 
        
               if (/import/.test(currentLine) && !/from\s+('|")vux('|")/.test(currentLine)) { 
        
                 isImport = true 
        
               } else if (/from\s+('|")(.+)('|")/.test(currentLine)) { 
        
                 if (isImport) { 
        
                   isImport = false 
        
                 } 
        
               }  else { 
        
                 if (isImport) { 
        
                   list[i] = trim(list[i]) 
        
                 } 
        
               }   
        
             } 
        
             return list.join('\n') 
        
           }

请问为什么去掉了缩进，这样在调试的时候非常的不方便呢

一年多过去了，请问有没有修复的计划

目前会有这样的问题，原因是正则匹配需要，后面重写 parser 后会修复。

Navigation Menu

使用了vux-loader后，在chrome上debug，查看到的.vue文件，每条语句前的空格都没有了 #26

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

	function trimLine (str) {
	let isImport = false
	let list = str.split('\n')
	for (let i = 0; i < list.length; i++) {
	let currentLine = trim(list[i])
	if (/import/.test(currentLine) && !/from\s+('\|")vux('\|")/.test(currentLine)) {
	isImport = true
	} else if (/from\s+('\|")(.+)('\|")/.test(currentLine)) {
	if (isImport) {
	isImport = false
	}
	} else {
	if (isImport) {
	list[i] = trim(list[i])
	}
	}
	}
	return list.join('\n')
	}

使用了vux-loader后，在chrome上debug，查看到的.vue文件，每条语句前的空格都没有了 #26

Description

Activity

airyland commented on Aug 16, 2017

custcy commented on Aug 16, 2017

airyland commented on Aug 16, 2017

custcy commented on Aug 18, 2017

mirari commented on Dec 12, 2017

eyasliu commented on Oct 16, 2018

eyasliu commented on Oct 16, 2018

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions