vue.js - es6 require(变量)报错

问题描述

问 题

如果在vue里（使用的是官方vue-cli脚手架）想要在绑定style里设置背景图片需要require('/Path')。
此时，
1.require('/path')没问题。
2.如果require(path + 'imageName')引入一个变量加上一个字符串就会报warning，但可以正确引入图片。
3.如果require(path + imageName)只引入变量，则报错，且无法引入图片。

请问如何正确的使用require（）引入变量？

解决方案

应该是 node 才支持这种动态引入，web 前端要写最好要写静态的模块名。

当然 webpack 的模块 api 也是支持动态名称的，Webpack 在处理动态名称模块名的时候，会直接将能识别的静态路径或者当前路径下的所有子文件都作为模块处理。例如：require('./image/ + imageName)，webpac 会将 image 路径下的所有文件都作为模块处理，做一个 Map 映射，编译后代码的 require 就是用 imageName 去匹配 Map 中是否存在对应文件。http://webpack.github.io/docs...

如果确实要这么写，那么可以使用 webpack 提供的 require.context，具体参考 webpack 官方文档

• CONTEXT

• http://webpack.github.io/docs...

至于 import 的话，webpack1 应该是要用 babel 编译，babel 当然是编译不通过啦！

这篇关于vue.js - es6 require(变量)报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！