Question

今天我第一次在Webpack上学习Vue.js，并试图使路由器能够处理惰性/动态导入。

我想，因为我重建我这有可能会或可能不会被用户的会话过程中使用了许多，很多网页内容管理系统，所以加载它们动态需要的模块，当他们需要使用延迟/动态进口，更有意义与问候我的应用程序。

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

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")
        }
    ]
});

然而，我碰上以下编译错误：

./src/router/index.js中的
ERROR模块构建失败（来自 ./node_modules/babel-loader/lib/index.js)：SyntaxError： ..... / src目录/路由器/ index.js：支持实验语法 'dynamicImport' 当前未启用

有附加说明：

...添加@巴贝尔/插件 - 句法 - 动态导入到 Babel配置的“插件”部分以启用解析。

告诉我问题出在哪一行，无论如何这很明显：

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

我认识到几个月前我独自使用Webpack时出现的错误，所以我知道我必须安装动态导入插件才能使它工作。

这是我安装什么：

npm install babel-plugin-syntax-dynamic-import

和我在做这个插件可我babel.rc配置文件和RAN 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

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

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

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

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

Answer 2

您的插件分配错误：

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

将是该插件的正确格式。

vue.js - 动态进口导致错误：当前未启用的实验语法“dynamicImport”支持

2 个答案: