小编Muh*_*hin的帖子

我正在使用 Webpack 4 的动态导入。当我构建我的入口文件（app.js）时，在 main.bundle.js 文件中，与其关联的模块无法将它的（模块）位置设置为“dist/{another_module}” '。它设置在根文件夹内。

webpack.config.js

const path = require("path");

module.exports = {
  entry: {
    main: "./src/app.js"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
     ]
  }
};

源代码/应用程序.js

function getScript() {
  return import(/* webpackChunkName: "script" */ "./script").then(res => {
    console.log(res.default);
  });
}

getScript();

源代码/脚本.js

export default function script() {
    console.log("script file is loaded")
}

.babelrc

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

在 vue 2+ 中，我可以轻松获取 的实例，this因此我可以编写如下内容，

// main.js
app.use(ElMessage)

// home.vue
this.$message({
  showClose: true,
  message: 'Success Message',
  type: 'success',
})

我应该为 vue 3 做什么，

在 setup() 内部，这不会是对当前活动实例的引用 由于 setup() 是在其他组件选项解析之前调用的，因此 setup() 内部的 this 的行为将与其他选项中的 this 的行为完全不同。当与其他选项 API 一起使用 setup() 时，这可能会导致混乱。-vue 3 文档。