文件路径的引用问题（配置文件路径vue.config.js）

最新推荐文章于 2023-06-01 19:40:15 发布
最新推荐文章于 2023-06-01 19:40:15 发布
阅读量2.3k 收藏 5
点赞数 1
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdgogo/article/details/107892693
版权
本文介绍如何在Vue项目中通过创建vue.config.js文件设置路径别名，简化文件引用。配置别名后，可在代码中直接使用别名，避免文件层级关系带来的困扰。同时，解决HTML中引用图片时遇到的问题，如循环遍历本地图片无法渲染，需通过require加载并使用相对地址，以及动态拼接地址时需注意需require处理。
摘要由CSDN通过智能技术生成

在项目根目录下创建vue.config.js文件
在这里插入图片描述

const path = require('path');//引入path模块
function resolve(dir){
   
    return path.join(__dirname,dir
最低0.47元/天 解锁文章
cdgogo
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue中使用配置文件vue.config.js简化文件夹路径
weixin_44932349的博客
04-03 1027
一、首先创建vue.config.js（名字不能更改） 二、使用vue.config.js为常用的文件路径进行标识 module.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/assets', 'components': '@/components', 'views': '@/views' } } } } 之后使用到该文件下
【vue-cli 3.0】 vue.config.js配置 - 路径别名
weixin_34275734的博客
08-24 751
如何配置vue-cli 3中vue.config.js的路径别名？ 前段时间更新电脑重装了一下vue-cli，发现了vue-cli已经更新到3.0版。用来搭建项目后发现简化了很多，而且配置文件现在可以全部统一在vue.config.js中，很方便有没有，从此以后一个配置文件走遍公司大小项目，妈妈再也不用担心我每次新建项目时重新配置各个复杂...
vue-cli创建的项目部署在相对路径，你需要做这些。
weixin_34347651的博客
07-26 719
如果静态文件不是部署在网站根目录下，vue-cli将给你造成巨大的麻烦。 你不能直接把build好的文件抛进一个目录。你不能直接在本地打开用vue做好的静态网站。 改成相对路径，主要需要做两步。 1、修改config => index.js => build => assetsPublicPath 中的'/'成为'./'...
vue项目部署后，文件加载相对路径设置
weixin_44785498的博客
04-15 3203
vue项目部署后，文件加载相对路径设置 vue项目打包放在oss服务器上，有时会因为oss上项目文件夹没有存在于配置的域名根目录下，就可能引起项目文件css、js等出现加载失败的情况 例如：oss配置域名 https://web.aaaa.com/ ，项目文件夹目录为 ost/web/H5/ ，这样我们在加载项目文件夹目录下 index.html 时，就可能会出现css、js文件加载失败，因为我们如果设置了绝对路径，项目就会从域名根目录下找资源 vue.config.js 文件修改项目配置文件 public
在vue.config.js中出现 const path = require('path') 什么用法？未解决
77今天也学习了的博客
04-16 1万+
在vue.config.js中出现 const path = require(‘path’)
如何配置vue.config.js 处理static文件夹下的静态文件
10-15
本文将详细介绍如何通过`vue.config.js`配置文件来确保静态文件在构建过程中被正确地复制到输出目录。 首先，我们要理解`vue.config.js`的作用。它是Vue CLI项目中的一个配置文件，允许我们自定义webpack配置，以...
vue.config.js中配置Vue的路径别名的方法
10-15
Vue CLI提供了一个名为`vue.config.js`的配置文件，允许我们自定义项目的构建设置，其中包括配置路径别名。以下将详细介绍如何在`vue.config.js`中设置Vue的路径别名。 首先，我们需要在项目的根目录下创建或编辑`...
vue.config.js完整配置-超详细
05-26
在 Vue 项目中，`vue.config.js` 文件是一个可选的配置文件，它允许开发者自定义项目的各种设置，以满足特定需求。这个文件通常位于项目的根目录下，如果使用了 `@vue/cli` 创建的项目，那么在初始化时该文件可能不...
vue - vue.config.js中devServer配置方式
10-16
在Vue.js开发过程中，`vue.config.js` 文件是用于配置项目的，特别是对于开发环境的设置。其中，`devServer` 配置对象是至关重要的，因为它控制着开发服务器的行为，包括如何处理跨域请求、代理服务器设置以及端口...
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
01-21
vue.config.js配置文件： module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the ...
vue build 相对路径 如何变成绝对路径_微服务和VUE(27)：VUE前端工程打包
weixin_39992957的博客
12-12 954
1. 介绍在我们完成代码编写之后，肯定是要把前端和后端 部署到服务器上面的，因此在部署之前，我们需要先打包我们的项目文件。VUE工程打包很方面，在工程目录下运行：npm run build若不报错，就成功了。一般不会报错，当然第一次打包的时候，我也遇到了一些错误，笨笨的我不知道如何解决，直接重新建了一个新的工程，把原来的文件该复制的复制，很神奇的就ok了。在打包之后，会新生成dist文件...
vue中require引入路径存在变量
qq_39131699的博客
06-26 6179
需求         菜单icon是通过后台获取的，但图片本身存在前端，后台返回的数据是图片名称。 问题         直接使用require(‘路径名’+图片名+’.png’)报错： 解决思路         使用require.context找到图片相关信息，名称
vue 配置vue.config.js
牛先森家的博客
09-01 1987
vue配置vue.config.js 路径 代码如下： const path = require('path'); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { lintOnSave: true, chainWebpack: (config) => { config.resolve.alias .set('@', resolve('src'))
vue基础学习
Jin0319的博客
06-01 2880
Vue基础学习 第一章 NPM包管理工具 1.1 认识一下什么是NPM npm(Node Package Manager node包管理器) 是Node.js默认的以JavaScript编写的软件包管理系统 npm来分享和使用代码已经成了前端的标配 官网:http://www.npmjs.com npm是Node.js默认的软件包管理系统包系统 安装完毕node后会默认安装好npm npm本身也是基于Node.js开发的软件 下载Node:http://nodejs.cn 1.2 安装NPM工具 npm的常
搭建VUE脚手架（二）---修改完善cli3
奋斗的新丁
12-11 656
光创建完cli3脚手架只是成功了一半，现在还无法直接使用（确切地说还不好用），还需要继续改造 1.创建vue.config.js 'use strict' const path = require('path') function resolve (dir) { return path.join(__dirname, dir) } const name = '个人模板' // 项目名称 const port = 1002 // 端口号 // All configuration item ex
Vue基础知识总结 9：vue webpack打包原理
学Java，找哪吒
10-06 2万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 一、前端模块化 webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。 并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。 二、打
vue 打包配置相对路径
qq_44663401的博客
06-01 2679
vue 打包配置相对路径。
实际在node环境中运行 const path = require('path')
热门推荐
sturgsslecofwe的博客
07-29 2万+
允许他人基于本文进行创作，且必须基于与原先许可协议相同的许可协议分发本文 （Creative Commons） 写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】Computed...
vuecli2打包时的绝对路径以及相对路径
zhangzez123的博客
09-17 2264
打包命令： npm run build 1.相对路径： 找到config下的index.js中build的属性 build: { assetsPublicPath: '/', //绝对路径 // assetsPublicPath: './', //相对路径 } 打包完后的绝对路径 打包完后的相对路径 到此结束，发文章方便以后查询。注意在config中有俩个属性一个是dev，另一个是build，dev这个是在vuecli服务器跑的路径，另一个build的是打包完的路径 ...
vue3 vue.config.js配置路径别名
最新发布
07-15
在Vue.js 3中，我们可以使用vue.config.js文件来配置路径别名。路径别名可以让我们在导入模块时使用自定义的快捷方式。 首先，在项目的根目录下创建vue.config.js文件，如果该文件已存在可以跳过此步骤。 然后，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值