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