Vue CLI 3.0.4 修改 Webpack 输出目录 dist 路径的方法

修改 Webpack 输出目录（dist）的基本方法

需要修改的配置文件位于项目根目录下的 build 文件夹中。

node_modules\@vue\cli-service\lib\options.js

如图所示，配置项 baseUrl 的最后一个路径段名称必须与 outputDir 指定的目录名称完全一致。

修改配置后，构建输出的路径结果将发生变化。

此外，如果配置了 assetsDir 字段，Webpack 会将 JS、CSS、图片等静态资源文件放置在该字段指定的文件夹内。

填写具体的目录值即可生效。

Webpack 配置中的路径问题解析

在开发 Vue 项目时，通常结合使用 vue-cli 和 Webpack。

这一过程中必然涉及组件引用的路径问题。

本文主要讲解如何修改文件路径配置。

首先，找到 build 文件夹下的 webpack.base.conf.js 文件。

打开该文件，定位到相关配置部分。

找到需要修改的配置区块。

接着对该部分配置进行修改。

如图所示，这是修改后的配置状态。

这样做可以缩短文件导入时的路径长度。

最后一步，也是至关重要的一步，必须重新执行 npm install。

只有执行此命令后，新的路径配置才会真正生效。

以上为个人经验分享，希望能为大家提供参考，也希望大家多多支持本站。