4.0.0-rc.1
https://github.com/tobyzerner/vue-cli-nbsp-bug
Environment Info:
System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Binaries:
Node: 10.15.3 - /usr/local/bin/node
Yarn: 1.17.3 - ~/.npm-global/bin/yarn
npm: 6.11.3 - ~/.npm-global/bin/npm
Browsers:
Chrome: 76.0.3809.132
Firefox: 68.0.2
Safari: 12.1.2
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.0.0
@vue/babel-plugin-transform-vue-jsx: 1.0.0
@vue/babel-preset-app: 4.0.0-rc.1
@vue/babel-preset-jsx: 1.1.0
@vue/babel-sugar-functional-vue: 1.0.0
@vue/babel-sugar-inject-h: 1.0.0
@vue/babel-sugar-v-model: 1.0.0
@vue/babel-sugar-v-on: 1.1.0
@vue/cli-overlay: 4.0.0-rc.1
@vue/cli-plugin-babel: ^4.0.0-rc.1 => 4.0.0-rc.1
@vue/cli-plugin-eslint: ^4.0.0-rc.1 => 4.0.0-rc.1
@vue/cli-service: ^4.0.0-rc.1 => 4.0.0-rc.1
@vue/cli-shared-utils: 4.0.0-rc.1
@vue/component-compiler-utils: 3.0.0
@vue/preload-webpack-plugin: 1.1.1
@vue/web-component-wrapper: 1.2.0
eslint-plugin-vue: ^5.0.0 => 5.2.3
vue: ^2.6.10 => 2.6.10
vue-eslint-parser: 5.0.0
vue-hot-reload-api: 2.3.3
vue-loader: 15.7.1
vue-style-loader: 4.1.2
vue-template-compiler: ^2.6.10 => 2.6.10
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
@vue/cli: 4.0.0-rc.1
Clone o repo, npm install && npm run serve
O modelo contém um intervalo contendo um caractere
. Esta extensão tem um fundo vermelho. Portanto, você deve ver uma pequena caixa vermelha na página.
O
no modelo está sendo ignorado e convertido em um espaço normal, o que significa que o elemento span não é exibido.
Eu não posso replicar este bug em um simples Vue jsfiddle, nem um projeto usando vue-loader sem vue-cli. Portanto, acho que algo em vue-cli pode ser o culpado, em vez de vue-template-compilador ou o próprio Vue.
Transferi esse problema para o repositório vue
porque acredito que seja um bug introduzido em https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebd
Veja outro relatório de bug em https://github.com/vuejs/vue/issues/9208#issuecomment -477811927
Solução alternativa atual:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(args => {
args.compilerOptions.whitespace = 'preserve'
})
}
}
Seria possível ignorar espaços de cabelo (  
) também ..?
_edit: desculpe, não vi o link do problema_
@naton conforme mencionado, isso deve ser discutido no
@LinusBorg este não é o
Acabamos de encontrar isso hoje e estamos tentando descobrir como contornar isso. Construímos alguma automação de localização que assume a configuração 'condensar' (com base na sugestão de Evan de que isso seria o padrão no 3.xe porque eu concordo com o comportamento de condensação). Portanto, fica difícil apenas trocar de volta para preservar sem efeitos colaterais potenciais.
Ok, parece que simplesmente não incluindo o nbsp; dentro de um elemento por si só resolve o problema. Adicionando isso como uma nota para qualquer outra pessoa que se depara com isso.
Transferi esse problema para o repositório
vue
porque acredito que seja um bug introduzido no e1abedbVeja outro relatório de bug em # 9208 (comentário)
Solução alternativa atual:
// vue.config.js module.exports = { chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .tap(args => { args.compilerOptions.whitespace = 'preserve' }) } }
Isso parece não funcionar mais com o Vue 3, ele gera o erro: "TypeError: Não é possível definir a propriedade 'espaço em branco' de indefinido". Alguma solução alternativa para o Vue 3?
Comentários muito úteis
Transferi esse problema para o repositório
vue
porque acredito que seja um bug introduzido em https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebdVeja outro relatório de bug em https://github.com/vuejs/vue/issues/9208#issuecomment -477811927
Solução alternativa atual: