Как мне установить динамический путь импорта с помощью Vue-Cli 3 и WebPack?
Я работаю с Vue-Cli 3, и это круто. Я посвятил себя использованию динамического импорта, чтобы разбить мое приложение на куски. При моей текущей установке файлы разделены правильно, но во внешнем интерфейсе эти файлы чанков загружаются в корень URL-адреса сайта, а не из папки, в которой он находится.
Вот как я настроил свое приложение:
export default {
name: "app",
components: {
CourseMain: () => import("./components/course/Main"),
},
А вот мой vue.config.js
файл:
const ASSET_PATH = process.env.ASSET_PATH || "/";
module.exports = {
assetsDir: "assets",
productionSourceMap: false,
filenameHashing: false,
css: {
loaderOptions: {
sass: {
data:
'@import "src/styles/_variables.scss"; @import "src/styles/_mixins.scss";'
}
}
},
configureWebpack: {
entry: {
app: "./src/main.js"
},
output: {
publicPath: ASSET_PATH,
filename: "./assets/js/my-app-[name].js"
},
optimization: {
splitChunks: {
chunks: "all"
}
},
externals: {
jQuery: "jQuery",
Swiper: "Swiper",
Vimeo: "Vimeo",
_: "_",
moment: "moment"
}
},
chainWebpack: config => {
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule.use("vue-svg-loader").loader("vue-svg-loader");
}
};
Я делаю что-то неправильно? Мне нужно либо жестко закодировать подпапки на основе корня моего веб-сайта, либо настроить это так, чтобы динамический импорт проверял папку, в которой хранится файл чанка.
Заранее спасибо!
Редактировать:
Я забыл упомянуть детали о структуре папок. Этот проект является плагином WordPress. Так что мой index.php
файл находится в корне моего сайта (mysite.com
), но приложение VUE находится на /wp-content/plugins/my-plugin/public/
, Так что мне нужно, чтобы вместо того, чтобы пытаться загрузить динамический импортированный файл из mysite.com/assets/js/chunkfilename.js
, это должно быть загружено из mysite.com/wp-content/plugins/my-plugin/public/dist/assets/js/chunkfilename.js