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

最新推荐文章于 2024-05-13 09:30:57 发布
转载 最新推荐文章于 2024-05-13 09:30:57 发布 · 3.6k 阅读 · 1

本文介绍如何在Vue项目中修改baseUrl和assetsDir的设置，确保静态资源正确加载。修改options.js文件中的baseUrl路径，使其与outputDir一致，同时设定assetsDir存放js、css等资源。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

修改的文件在

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

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

修改后的路径结果

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

填了值

vue-cli 3.x 修改dist路径
aGreetSmile的博客
09-30 525
文件内容就需要参照官网来学习了传送门，这里只解决这个问题。 立即联想到需要改输入路径的地址。却尴尬的发现之前的build和config文件夹不见了。查阅后发现如果需要自定义配置，需要在项目的 根目录添加一个Vue.config.js。在这个文件中，我们可以进行一些个性化定制。 module.exports = { // 基本路径 baseUrl: './', // ...
vue项目打包：修改dist文件名
江一铭
07-07 2358
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,
Vue cli 3.0 如何修改assets 路径为相对路径（解决Vue项目打包后打开index.html页面显示空白以及图片）
或许丶Blog
01-14 7805
修改baseUrl配置为’./’    即可正常显示页面
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 394
前提条件：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脚手架的安装过程
qq_38934214的博客
04-13 2337
废话少说，当你看到这里的时候我认为你已经浏览过相关的文章了。这也是我自己安装过程的总结。不管是Vue的官方文档还是Vue的菜鸟教程，甚至优快云博客上面都有许多的安装教程，他们的总结也非常棒。我也把我的安装过程说一说，希望总会有帮助到某个人的那一天。我用的是window系统 总结一下就是： 1 cnpm install --global vue-cli 2 vue init webpack...
Vue项目优化&添加进度条效果&修改webpack默认配置&加载外部CDN&定制首页内容&路由懒加载
fengzitaba的博客
11-03 2506
添加进度条 1.安装nprogress----npm install nprogress 2.导入进度条插件 //导入进度条插件 import NProgress from 'nprogress' //导入进度条样式 import 'nprogress/nprogress.css' 3.在axios拦截器中开启关闭 //请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息 axi...
vue打包上线优化
weixin_58032613的博客
02-18 908
本文详细的讲解了项目打包上线的过程，如有错误，请私信我更改
vue-admin-后台管理系统，全文注释。
whyfuck的博客
12-10 2万+
# vue-admin-stepbystep > A Vue.js project ### 项目背景 这是公司的一个项目的阉割版，可以用作模板，里面的技术点基本全部都有注释，全都有注释，全都有注释，重要事说三遍， 写注释很辛苦，给个小赞，github给个小start,鼓励鼓励码字的我，项目正在陆续的完善中。还有重申一点，我们是前端工程师，不是码农。 麻雀虽小五脏俱全：[项目地址 htt...
下载vue3.0.4
最新发布
07-29
在引用[5]中，用户引用的是“vue3.0.4搭建vue-cli”，这里“vue3.0.4”可能是指Vue CLI 3.0.4，因为该引用中创建项目时选择的是Vue 2（因为那时还没有Vue 3）。 因此，我们提供两种方案的步骤，并让用户根据自己的...
详解webpack的配置文件entry与output
08-29
本篇文章主要介绍了webpack的配置文件entry与output，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-element-admin实现build打包文件下改变每个静态资源的路径
vvv3171071的博客
10-28 2925
组长两句话说明的需求，其实也简单，就改一行代码。 打开vue.config.js，找到assetsDir，默认输出路径是’static’，改成你想要将静态资源输出到的路径就可以了。我改成了’home/static’ // assetsDir: 'static', assetsDir: 'home/static', 然后打包后的dist里的静态资源就放到了dist/home/static目录下 题外话：这样做好像是利于Nginx的部署啥的，等这几天忙完项目后好好请教一下原理吧，太菜了，还得更加努
chroot 后如何访问外部目录
stevenliyong 的专栏
10-13 1931
在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 172
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', // 输出文件目录 } ...
vue项目中vue.config.js中配置webpack详解
wzy_PROTEIN的博客
05-13 5969
vue-cli3以前的版本中把webpack的配置都写在config文件中，可以vue-cli3以上的版本中没有了config目录，可以将配置webpack的文件写在vue.config.js文件里面。是一个可选的配置文件，如果项目的 (和同级的) 根目录中存在这个文件，那么它会被自动加载。你也可以使用中的vue字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
webpack.config.js(详解)
山海也有意难平
08-05 3417
module.exports = { publicPath: './',//设置的就是域名根目录到项目文件根目录间的url。 outputDir: 'motorway',//打包后生成的文件目录名 assetsDir: 'static',//静态资源目录 lintOnSave: process.env.NODE_ENV === 'development',//设置是否在开发环境下每次保存代码时都启用 eslint验证。 productionSourceMap: false,//设置是否.
Vue-Cli 配置项
海胆的博客
05-05 1974
@vue/cli @vue/cli-service @vue/cli-plugin-xx vue-cli-plugin-xx
Vue CLI 配置详解：publicPath、outputDir、assetsDir、indexPath、filenameHashing、configureW
api_git355的博客
09-23 1594
作为一个开发人员，了解 Vue CLI 的配置选项是非常重要的，因为它们可以帮助我们更好地控制项目的构建和输出结果。在本文中，我们将详细介绍几个常用的 Vue CLI 配置选项，包括：publicPath、outputDir、assetsDir、indexPath、filenameHashing、configureWebpack 和 productionSourceMap。如果你的项目中还没有该文件，可以在项目根目录下创建一个，并将配置选项以模块导出的方式进行配置。请注意，以上的示例代码都是在。
Vue-cli 2.8.1中Webpack配置详解及结构剖析
本文将深入解析vue-cli中的webpack配置细节，针对版本号为vue-cli 2.8.1和Vue 2.2.2以及webpack 2.2.1的环境，主要讨论`build`目录下的关键配置文件。目录结构清晰，主要包括`build.js`、`webpack.*.conf.js`等，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值