如何在vue-cli3.0中自定义css、js和图片的打包路径？

本文共计1048个文字，预计阅读时间需要5分钟。

前言：我们有时因为一些特殊需求，可能需要将js/css/img等资源文件都打包到根路径下，但vue-cli3.0的路径配置中仅有一个+assetsDir配置项，只能配置所有静态文件所在的文件夹，而不能直接针对+

结果：为了实现资源文件打包到根路径，可以通过修改webpack配置来实现。具体做法是，在vue.config.js文件中，找到output字段，并将publicPath属性设置为根路径。例如：

javascriptmodule.exports={ // ... output: { // ... publicPath: '/', }, // ...};

前言

我们有时候因为一些特殊需求，可能需要将js/css/img等资源文件都打包到根路径下，但vue-cli3.0的路径配置中仅有 assetsDir配置项能够配置所有的静态文件所在的文件夹，并不能针对css/js/img等资源文件分别来做设置，那么请看我如何尝试的吧！

分析

众所周知，vue-cli3.0使用了webpack进行打包处理，那么我们是否可以拿到目前打包默认的一些webpack配置，并在这些配置中找到一些蛛丝马迹，从而更改配置来实现对打包路径的更改呢？

好在vue-cli3.0提供了这样的功能！

我假设您已经安装了vue-cli3.0，那么打开命令行，运行一下命令：

vue ui

这个命令将会启动一个页面，用来简化开发过程中的一系列操作。

我们先导入当前项目（自己摸索下，此处不展开详说）。