Question

我正在使用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加载

如何使用Vue-Cli 3和WebPack设置动态导入路径？

编辑：

0 个答案: