vue-cli3.0.4中，webpack的dist路径修改方法

最新推荐文章于 2024-05-07 03:41:07 发布
最新推荐文章于 2024-05-07 03:41:07 发布
阅读量3.5k 收藏 1
点赞数 1
分类专栏： 前端

修改的文件在

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

如图，baseUrl最后一个路径名字要和outputDir的名字相同

修改后的路径结果

 另外assetsDir如果有值，那么会把js,css,img之类的静态资源放到该值对应的文件夹里去

填了值

大猫会长
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue cli 3.0 如何修改assets 路径为相对路径（解决Vue项目打包后打开index.html页面显示空白以及图片）
或许丶Blog
01-14 7723
修改baseUrl配置为’./’    即可正常显示页面
vue-cli 3.x 修改dist路径
aGreetSmile的博客
09-30 477
文件内容就需要参照官网来学习了传送门，这里只解决这个问题。 立即联想到需要改输入路径的地址。却尴尬的发现之前的build和config文件夹不见了。查阅后发现如果需要自定义配置，需要在项目的 根目录添加一个Vue.config.js。在这个文件中，我们可以进行一些个性化定制。 module.exports = { // 基本路径 baseUrl: './', // ...
vue项目打包：修改dist文件名
江咏之
07-07 2246
vue.config.js // 输出文件目录(默认dist) outputDir: 'web', const path = require('path') const resolve = dir => path.join(__dirname, dir) module.exports = { // 基本路径 publicPath: './', // 输出文件目录(默认dist) outputDir: 'web', // 关闭eslint验证 lintOnSave: false,
Webpack配置全解析（基础篇）
最新发布
2401_84097798的博客
05-07 619
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
webpack之清除dist目录(三)
极简
03-14 1万+
在生成新的构建之前，先清除旧的构建文件 一、插件安装 npm install clean-webpack-plugin --save-dev 二、配置修改 //用于在构建前清除dist目录中的内容 const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除dist构建目录文件 plugins.push(...
vue3.0.4搭建vue-cli
qq_41884677的博客
06-01 308
前提条件：nodejs > 8.9,vue3.0.4 参考链接：vue cli3.0快速搭建项目详解（强烈推荐） 1. vue create 创建新项目 cmd输入 vue create project-name 后自定义预设，空格为选中,点击enter进入下一步 Vue CLI v3.0.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Babe
详解vue-cli脚手架中webpack配置方法
12-03
Vue CLI 中的 Webpack 配置通常分为多个文件，如 `webpack.base.conf.js`（基础配置）、`webpack.dev.conf.js`（开发环境配置）和 `webpack.prod.conf.js`（生产环境配置）。这些配置文件定义了不同环境下的构建规则...
vue-cli中的webpack配置详解
08-29
在Webpack中，入口文件是指项目的主要入口点，即应用程序的起点。在Vue-cli项目中，入口文件是main.js，位于src目录下。main.js文件是整个应用程序的入口点，负责引入各种组件和模块。 输出文件 输出文件是指...
vue-cli 3.x 修改dist路径的方法
12-11
一些牢骚 前端的世界真的太奇妙，更新速度真的跟火箭一样。...最近在一个项目中，将vue-cli更新到了最新版的3.x。同时webpack也更新到了4.x。webpack4在一些配置上有了很大一部分的精简。据说是受到了最近
vue-cli与webpack处理静态资源的方法及webpack打包的坑
12-09
通过Vue-cli进行webpack打包的坑 ...你也许会注意到vue-cli与webpack结合的项目中，我们通常会有两个静态资源的路径：src/assets和static/，他们两者的区别是什么呢？本文主要和大家介绍了vue-cli与
vue-element-admin实现build打包文件下改变每个静态资源的路径
vvv3171071的博客
10-28 2754
组长两句话说明的需求，其实也简单，就改一行代码。 打开vue.config.js，找到assetsDir，默认输出路径是’static’，改成你想要将静态资源输出到的路径就可以了。我改成了’home/static’ // assetsDir: 'static', assetsDir: 'home/static', 然后打包后的dist里的静态资源就放到了dist/home/static目录下 题外话：这样做好像是利于Nginx的部署啥的，等这几天忙完项目后好好请教一下原理吧，太菜了，还得更加努
详解webpack的配置文件entry与output
08-29
本篇文章主要介绍了webpack的配置文件entry与output，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
chroot 后如何访问外部目录
stevenliyong 的专栏
10-13 1777
在chroot 下编译的时候，每次都需要手动将svn工作目录下branch拷贝到板子的nfs目录，因为chroot后无法访问外部目录, 感觉不是很方便。而且如果作了代码修改还在需要来回反复拷贝。 现在有简单的方法。#sudo mount -t none /home/stevenliyong/svn/my-project/Branch /tftpboot/nfs-steven/wor
webpack4.0各个击破（3）—— Assets篇
weixin_33770878的博客
08-27 138
webpack作为前端最火的构建工具，是前端自动化工具链最重要的部分，使用门槛较高。本系列是笔者自己的学习记录，比较基础，希望通过问题 + 解决方式的模式，以前端构建中遇到的具体需求为出发点，学习webpack工具中相应的处理办法。（本篇中的参数配置及使用方式均基于webpack4.0版本） 一. Assets资源的基本处理需求 Assets，指项目中被引用的资源，通常为各种格式的图片和字...
Vue CLI4.0 webpack配置属性——outputDir、assetsDir、indexPath
热门推荐
Jay的博客
04-28 3万+
outputDir Type: string Default: dist 作用： 设置项目打包生成的文件的存储目录，可以是静态路径也可以是相对路径。 注意：相对路径是相对于项目文件当前的根路径。 写法： module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 } ...
webpack.config.js(详解)
山海也有意难平
08-05 3263
module.exports = { publicPath: './',//设置的就是域名根目录到项目文件根目录间的url。 outputDir: 'motorway',//打包后生成的文件目录名 assetsDir: 'static',//静态资源目录 lintOnSave: process.env.NODE_ENV === 'development',//设置是否在开发环境下每次保存代码时都启用 eslint验证。 productionSourceMap: false,//设置是否.
Webpack
yyj_ZS的博客
12-23 2346
什么是Webpack? Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。 要使用 Webpack 前须先安装 Node.js。(以上介绍来自百度,看着懵逼的话可以看我下边自己总结的) Webpack是前端的一个自动...
webpack打包优化(最终极版)
weixin_49356003的博客
06-22 1585
以前公司里有优化的时候,打包优化和代码优化都是他来办，好家伙现在只剩下我一人了，为了在公司站住脚特意去度娘那里请教了一番，发现并不是那么难，以下就是我webpack打包的最终极版，把10MB变成300KB不在话下。 一，webpack配置 vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。 1，配置静态资源路径 module.exports = { publicPath: './', // 静态资源路径（默认/，打包后会白屏） ..
vue.config.js 文件中webpack配置，webpack 多种应用场景配置, 优化及多页面应用开发
gcyaozuodashen的博客
12-07 1万+
vue cli3 webpack精讲
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值