Vue中使用配置文件vue.config.js简化文件夹路径

最新推荐文章于 2024-07-22 13:50:45 发布
最新推荐文章于 2024-07-22 13:50:45 发布
阅读量1k 收藏 1
点赞数
分类专栏： Vue学习 文章标签： vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44932349/article/details/115399117
版权
本文介绍了如何在Vue项目中创建并利用vue.config.js文件，通过为常用文件路径设置别名，实现路径引用的简化。当文件位置变动时，只需在配置文件修改一处，提高了开发效率和代码维护性，尤其适合大型项目。
摘要由CSDN通过智能技术生成

一、首先创建vue.config.js（名字不能更改）
在这里插入图片描述
二、使用vue.config.js为常用的文件路径进行标识

module.exports = {
   
  configureWebpack: {
   
    resolve: {
   
      alias: {
   
        'assets': '@/assets',
        'components'
最低0.47元/天 解锁文章
死魚
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue】【vue.config.js】vue项目路径简写
qq_34838046的博客
10-05 813
const path = require('path'); const resolve = (dir) => path.join(__dirname, dir); module.exports = { //跨域代理设置 devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: {
vue2 使用 alias 简化路径
半夏_2021的博客
04-23 1775
Vue2 使用 alias 简化路径
vue.config.js详细配置
最新发布
L_R_H_的博客
07-22 1335
/ 使用 DefinePlugin 插件定义环境变量。
Vue3配置路径简写以及组件通过插件形式引入
weixin_38992765的博客
01-31 922
环境： Vue3+Vite 1. 创建vite.config.js const path = require("path"); console.log(path.resolve(__dirname, "./src")); module.exports = { base: "/", outDir: "target", port: 3001, open: true, https: false, ssr: false, alias: { //路径简写配置 "/@/":
记一次vue.config.js路径缓存问题
Maybe221的博客
07-19 391
拉完代码后vue.config.js中访问路径被修改，启动服务后页面有问题 换成本地的路径后：target: http://127.0.0.1:8888, 依然有问题，最终发现是缓存的问题，重启浏览器清理缓存即可
Vue项目自定义项目访问路径
热门推荐
qq_40651168的博客
09-15 1万+
1. 在index.html添加 (shop自定义的名称) 2. 在配置路由的index.js添加mode: ‘history’, base: ‘/shop/’ 3.在项目的 config\index.js配置 ** ** 4.以上就已经配置完了,最后项目的请求地址就是: ** http://localhost:8083/shop/ 注意: 所有的配置名称...
Vue-cli3项目配置Vue.config.js实战记录
10-18
相比之前的版本，Vue CLI 3 在项目结构上进行了简化，不再包含 `build` 和 `config` 文件夹，而是将大部分配置集中到了 `vue.config.js` 文件中。这个文件位于项目的根目录下，允许开发者自定义 Webpack 配置，以...
vue.config.js常用配置详解
10-15
Vue CLI 3.0 版本引入了许多改进，包括简化项目结构，移除了 `build` 和 `config` 文件夹。大部分配置现在都在项目的根目录下通过 `vue.config.js` 文件进行管理。下面我们将详细介绍 `vue.config.js` 中的常用配置...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
对于Vue CLI 2，需要修改config/index.js文件中的assetPublicPath的路径为相对路径“./”。对于Vue CLI 3，则需要在项目的根目录下创建一个vue.config.js文件，并设置publicPath和assetsDir等选项，以及通过修改路由...
Vue3src 路径别名`@`的配置vite.config.ts,tsconfig.json
jieweiwujie的博客
02-15 474
这个有好几种写法都可以实现配置，下面可以看看这些写法。
文件路径的引用问题（配置文件路径vue.config.js）
得意小门生的博客
08-09 2390
在项目根目录下创建vue.config.js文件 const path = require('path');//引入path模块 function resolve(dir){ return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径 } module.exports={ chainWebpack:(config)=>{ config.resolve.alias //set第一个参数
vue项目修改访问路径
qq_38317390的博客
11-02 8263
1.pubic/index.html 2.router/index.js 3.vue.config.js 4. 5.完成，最终访问地址：http://171.16.5.12:4528/npm/index.html#/login
vue3.0自己添加一个vue.config.js配置文件
赵佳敏的博客
04-07 1424
vue3.0自己添加一个vue.config.js配置文件一、执行配置文件二、发布配置文件 注意：vue-cli.3.3版本后后将baseUrl废除了,使用publicPath代替了,要将baseUrl换为publicPath。 //vue3.0自己添加一个vue.config.js配置文件 module.exports = { // 项目部署的基础路径 publicPath: './', // 将构建好的文件输出到哪里（或者说将编译的文件） outputDir: 'di.
【vue-cli3】关于在vue.config.js做资源路径的配置
Liz's blog hut.
04-16 2940
前言 今天使用npm run build打包一个项目，然后访问打包文件的index.html发现资源文件都加载失败了。仔细查看之后，发现它们加载的路径不太对。 过程 发现问题之后，就是查了一下，发现有人说在vue.config.js文件中设置publicPath: '././'（这个属性默认的是./）即可。 备注：vue.config.js需要自己在项目根目录下创建，然后在module.ex...
vue项目vue.config.js配置打包压缩以及代码分离以及打包后dist文件夹添加时间戳实现更新后无缓存，自动压缩打包后dis文件夹并加上打包时间以及proxy代理
weixin_51406830的博客
03-15 3273
const moment = require('moment'); const TerserPlugin = require('terser-webpack-plugin') const FileManageerPlugin = require('filemanager-webpack-plugin'); const CompressionPlugin = require("compression-webpack-plugin"); module.exports = { configureWebpack
【Vue】vue.config.js 的完整配置
DomCode
04-18 5528
之前，我有提到过，当然大家肯定也都知道，Vue3.0不在有webpack.config.js的配置；但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整webpack, 这个时候，在Vue3.0的项目当中，我们就需要在根目录创建vue.config.js去完成webpack的一些特殊配置,默认它会被 @vue/cli-service 自动加载。此刻，你需要创建vue.config.js文件。查看默认的webpack配置。
vue中引入路径说明
heni6560的博客
01-19 1439
/当前文件同级目录…/当前文件上一级目录@ 的作用是在你引入模块时，可以使用 @ 代替 /src 目录，避免易错的相对路径。
基于SpringBoot和vue的若依后台管理系统 部署
水w的博客
05-30 3251
基于SpringBoot和vue的若依后台管理系统---本地部署
vue.config.js配置alias
08-18
在vue.config.js中配置alias的作用是为了简化对项目中不同文件路径的引用。通过配置alias，我们可以为常用的文件夹设置快捷别名，方便在代码中引用。比如，将"src/assets"设置为"assets"，那么在代码中引用图片或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值