vue.js webpack 问题:无法使用 configureWebpack 向 vue.config.js 添加插件

Posted

技术标签:

【中文标题】vue.js webpack 问题:无法使用 configureWebpack 向 vue.config.js 添加插件【英文标题】:vue.js webpack problem: can't add plugin to vue.config.js with configureWebpack 【发布时间】:2019-04-04 05:12:42 【问题描述】:

vue.js webpack 问题:我无法使用 configureWebpack 向 vue.config.js 添加插件

我使用 vue cli 3 创建了一个 vue.js 项目。我按照以下示例进行操作: https://cli.vuejs.org/guide/webpack.html

我的 vue.config.js:

let webpack = require('webpack');

module.exports = 

    configureWebpack: 
        plugins: [
            new webpack.DefinePlugin(
                __TEST_MESSAGE__: JSON.stringify('howdy there!')
            )
        ]
    ,
;

解析后的 webpack 配置如下:


    mode: 'production',
    ...
    plugins: [
        /* config.plugin('vue-loader') */
        new VueLoaderPlugin(),

        /* config.plugin('define') */
        new DefinePlugin(
          
            'process.env': 
              VUE_APP_CLI_UI_URL: '""',
              NODE_ENV: '"production"',
              BASE_URL: '"/"'
            
          
        ),
        /* config.plugin('case-sensitive-paths') */
        new CaseSensitivePathsPlugin(),

        ...
        /////////////////////////////////////////////////////
        // Inserted note for SO: This is messed up!  Should
        // be: 
        // new DefinePlugin( __TEST_MESSAGE__: '"howdy there!"' )
        /////////////////////////////////////////////////////
        
          definitions: 
            __TEST_MESSAGE__: '"howdy there!"'
          
        
    ],
    ...

configureWebPack 应该将我的插件与 vue 定义的插件合并。为什么要剥离 DefinePlugin 类,只在 plugins 数组中包含构造函数的参数?

【问题讨论】:

【参考方案1】:

因为 Vue 已经包含了DefinePlugin,所以你需要使用 Webpack 的链式 API 来修改它,而不是尝试添加一个新的。

module.exports = 
  chainWebpack: config => 
    config.plugin('define').tap(args => 
      args[0].__TEST_MESSAGE__ = JSON.stringify('howdy there!')
      return args
    )
  

这会产生以下配置(只是一个示例)...

new DefinePlugin(
  
    'process.env': 
      NODE_ENV: '"development"',
      BASE_URL: '"/"'
    ,
    __TEST_MESSAGE__: '"howdy there!"'
  
),

见https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin

【讨论】:

完美。谢谢。 @jingleheimer 不客气。感谢您提出一个非常详细的好问题。 @phil 如何在我的组件中访问 TEST_MESSAGE @daniel 我相信它应该可以作为一个全局变量使用,就像process.env @Phil 感谢您的回答,但是当我分配为私人项目时,我得到了“TS2304 找不到名称:TEST_MESSAGE”(如果有问题,我会使用 vue 和 TS)= TEST_MESSAGE;

以上是关于vue.js webpack 问题:无法使用 configureWebpack 向 vue.config.js 添加插件的主要内容,如果未能解决你的问题,请参考以下文章

VUE JS 2 + WEBPACK 无法读取未定义 VUE RESOURCE 的属性“获取”

无法从嵌套组件中的资产文件夹加载图像(Vue.js 2.0 / Webpack)

vue.js打包生成配置文件(参考)

无法访问我的站点中的链接(复制和粘贴):Node.js - Express.js - Webpack - Vue.js - 历史模式

webpack 块和 vue.js 组件的浏览器缓存问题

Vue.js props img src 与 webpack 别名 (@) 绑定