Модуль Vuejs не найден, ошибка не может разрешить '@ / components / error с помощью веб-пакета
Я не могу найти ответ на этот вопрос, за исключением того, что, по-видимому, это как-то связано с конфигурацией веб-пакета, о чем я ничего не знаю.
Я хочу использовать следующий способ доступа к каталогу моего приложения, в котором запущен простой шаблон webpack @ / components /, но для меня он просто генерирует ошибку
module not found error can't resolve '@/components/ error
из прочитанного мной есть кое-что, что мне нужно настроить в конфигурации webpack, чтобы эта работа работала, но я не могу найти, что это такое, может ли кто-нибудь помочь, пожалуйста?
На данный момент я пробую это на сервере разработки, но, очевидно, очень хочу убедиться, что он также будет работать в производственной среде.
Я нашел этот js-код, который, как мне кажется, делает то, что я хочу, но понятия не имею, как я могу заставить его работать с настроенным веб-пакетом, который никогда не использовал его раньше.
Благодарность
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
}
}
}
Спасибо
Ответы 2
Я использую этот шаблон: https://github.com/vuejs-templates/webpack.
В уже созданном webpack.base.conf это часть экспортированного объекта конфигурации (я включаю более чем релевантные для описания контекста):
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js',
},
plugins: [
// make jquery available for all modules
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
})
],
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
Это то, что может вам помочь:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
Теперь в моем импорте я просто пишу что-то вроде
import myModule from '@/fileInSrcFolder';
где @ - это папка src внутри корневой папки.
На всякий случай конфигурационный файл находится внутри папки в корневой папке, а функция разрешения выглядит так:
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
Единственное, что я делаю с Webpack, - это создаю псевдоним, чтобы @ указывал на корневой каталог js. Это устраняет необходимость в относительных путях при импорте файлов. Добавьте следующий код в webpack.mix.js.
mix.webpackConfig({
resolve: {
alias: {
@’: __dirname + '/resources/assets/js'
},
},
})
https://medium.com/@sadnub/vuejs-and-laravel-api-part-2-711c4986281c
Но
compilerOptionsпредназначен для TypeScript ... это отличается от webpack и vuejs. Вы используете TS в своем проекте? Можете ли вы поделиться другим кодом?