vue.js

Question

我今天第一次学习 Vue.js 使用 Webpack 并尝试让路由器使用 lazy/dynamic 导入。

我想使用 lazy/dynamic 导入，因为我正在重建我的内容管理系统，它有很多很多页面，在用户会话期间可能会或可能不会使用，所以动态加载他们需要的模块，当他们需要它们，对我的申请更有意义。

我最基本的路由器目前看起来像这样：

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

function loadView(view) {
    return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`);
}

export default new Router({
    routes: [
        {
            path: "/",
            name: "dashboard",
            component: loadView("Dashboard")
        },
        {
            path: "/login",
            name: "login",
            component: loadView("Login")
        }
    ]
});

但是，我运行进入如下编译错误：

ERROR in ./src/router/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: ...../src/router/index.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled

附加说明：

Add @babel/plugin-syntax-dynamic-import to the 'plugins' section of your Babel config to enable parsing.

并告诉我哪一行是问题所在，这很明显：

return () => import(/*..........
             ^

我几个月前自己玩 Webpack 时就发现了这个错误，所以我知道我必须安装动态导入插件才能完成这项工作。

这是我安装的：

npm install babel-plugin-syntax-dynamic-import

并且我在我的 babel.rc 配置文件和运行 npm run dev 中提供了这个插件以重新编译所有内容：

{
    "presets": [
        [
            "@babel/env", {
                "modules": false,
                "targets": {
                    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
                }
            }
        ]
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

但我仍然遇到错误，我仍然无法使用动态导入功能！难道我做错了什么？有没有其他人在让动态导入工作时遇到问题？

我的webpack.config文件：

'use strict';

const webpack = require('webpack');
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: [
        './src/app.js'
    ],
    devServer: {
        hot: true,
        watchOptions: {
            poll: true
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.js$/,
                use: 'babel-loader'
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            outputStyle: 'compressed',
                            data: `
                                @import "./src/assets/scss/_variables.scss";
                                @import "./src/assets/scss/_mixins.scss";
                            `
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {
            "@": path.resolve(__dirname, './src'),
            "Components": path.resolve(__dirname, './src/components/')
        }
    },
    optimization: {
        minimizer: [new UglifyJsPlugin()],
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })
    ]
}

我的 package.json 文件：

{
  "name": "manage_v2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config build/webpack.config.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.22",
    "vue-router": "^3.0.2",
    "vuex": "^3.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.0.5",
    "babel-plugin-dynamic-import-webpack": "^1.1.0",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "uglifyjs-webpack-plugin": "^2.1.1",
    "vue-loader": "^15.6.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

Answer 1

您的插件分配有误：

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

将是该插件的正确格式。

Answer 2

经过数小时的挫折，我自己解决了这个问题。我仍然不知道为什么 Babel、Webpack 和 Vue 文档中使用的方法不起作用，但我确实让它起作用了：

我首先从 babel.rc 文件中删除了插件声明，然后在 webpack.config 文件中向 babel 加载器添加了一个选项：

{
    test: /\.js$/,
    use: {
        loader: "babel-loader",
        options: {
            plugins: [
                "@babel/plugin-syntax-dynamic-import"
            ]
        }
    }
}

我希望这对其他人有帮助。

vue.js - dynamic imports results in error: Support for the experimental syntax 'dynamicImport' isn't currently enabled

vue.js - dynamic imports results in error: Support for the experimental syntax 'dynamicImport' isn't currently enabled

dynamic-import

webpack

babeljs

vue-router