Мне нужно создать легко настраиваемый веб-сайт в виде одного файла. Я использую webpack 4.x
Я создал файл json с "конфигурацией"
{
"externals": [
{ "link": "http://lynda.com", "image": "./assets/lynda.jpg" },
{ "link": "https://www.mindtools.com/community", "image": "./assets/mindtools.jpg" },
{ "link": "https://www.ted.com/talks", "image": "./assets/ted.jpg" },
{ "link": "https://stackoverflow.com", "image": "./assets/stack.jpg" }
]
}
Я также настроил base64-inline-loader в webpack
// {
// test: /\.(jpg|jpeg|png)(\?.*)?$/,
// use: 'base64-inline-loader?name=[name].[ext]'
// },
{
test: /\.(jpg|jpeg|png)(\?.*)?$/,
loader: 'base64-inline-loader',
options: {
name: utils.assetsPath('[name].[ext]')
}
},
Обе конфигурации выше не работали. URL-адреса, созданные в компоненте vue на основе данных json, по-прежнему относятся к файлу, и, конечно же, эти ссылки указывают на 404 URL-адреса. Все остальные встроенные изображения для CSS и HTML обрабатываются правильно.
Я что-то делаю не так, но не знаю, что это. Любые идеи?
Готово, но я не на 100% доволен этим разрешением.
Я переместил все данные из json в контроллер приложения с предложением require
data() {
return {
externals: [
{ link: "https://lynda.com", image: require('./assets/lynda.jpg') },
{ link: "https://www.mindtools.com/community", image: require('./assets/mindtools.jpg') },
{ link: "https://www.ted.com/talks", image: require('./assets/ted.jpg') },
{ link: "https://stackoverflow.com", image: require('./assets/stack.jpg') }
]
};
}
на сайте webpack я использую классический url-loader
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
// limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
все еще ищу возможность нормальной обработки файлов json