vue常见问题之vue-router中@代表src目录

Vue项目中Webpack配置解析

最新推荐文章于 2024-06-10 10:16:13 发布

原创最新推荐文章于 2024-06-10 10:16:13 发布 · 4.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

6 篇文章

订阅专栏

本文解析了Vue项目中Webpack的配置细节，重点介绍了如何通过配置让'@'符号指向src目录，以及如何设置别名简化文件引用路径，对理解Vue项目的构建流程有重要作用。

vue项目中经常遇到“@”代表“src目录”的情况，
其实这个是webpack起的别名；
在build/webpack.base.conf.js中有声明；

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'common': resolve('src/base'),
    }
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

manny-liu

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

在vue项目中配置@指向src

seimeii的博客

11-03

1220

第一张方法小编是在项目的vue.config.js中配置的，代码如下图所示： //安装path模块 const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports={ devServer:{}, chainWebpack: (config) => { config.resolve.alias .set("@", resolve(

vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由

05-14

根据文件目录自动生成vue-router的路由。安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - ...

参与评论您还未登录，请先登录后发表或查看评论

vue用@表示src文件夹

睡大觉的博客

02-26

1310

vue用@表示src文件夹，引入时找文件路径更方便

vue-cli使用@表示src

string佳佳的博客

09-15

560

在vue.config.js文件里面配置 const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { ... devServer:{}, configureWebpack: { // provide the app's title in webpack's name field, so that // it can be access

vue使用@表示src文件夹

weixin_54514048的博客

04-11

222

【代码】vue使用@表示src文件夹。

vue中引入路径@的用法，@实际上=/src目录

zz2230633069的博客

10-20

6330

一、Vue文件中引用路径的介绍 1、路径 ./ ./当前文件同级目录 2、路径 …/ …/当前文件上一级目录 3、@符号 @ 的作用是在你引入模块时，可以使用 @ 代替 /src 目录（是固定的），避免易错的相对路径。二、Vue中使用 1. vue.config.js配置文件中使用 chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', res

Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统

05-02

Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...

vue-router 中router-view不能渲染的解决方法

12-08

在使用vue-router的时候跳了一个很大的坑，router-view不能渲染，花费了好多时间终于发现了原因。项目目录结构其中main.js import Vue from 'vue'; import App from './App'; import router from './router'; /*...

vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发

05-27

vue-router-nav呈现vue-router路由的简约响应式导航栏。观看演示。依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。观看演示。依赖关系您需要安装vue-router...

vue-router离线版中文文档

05-05

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问...在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

Vue中src别名的配置“@”

qq_63497385的博客

06-03

1032

在 Vue 项目中，特别是在使用 Vue CLI 创建的项目中，@ 符号通常被用作 src 目录的别名。这意味着你可以在项目中的任何地方通过 @ 快速引用 src 目录下的文件，而不是每次都写完整的相对路径。要在 Vue 项目中配置 @ 符号作为 src 目录的别名，你通常不需要手动修改任何配置文件，因为 Vue CLI 已经为你做了这个设置。但是，如果你想要了解这个别名是如何设置的，或者如何在其他构建工具（如 Webpack）中手动设置它，以下是一些基本的步骤和概念。

vue配置src为@（根目录）

weixin_44161385的博客

03-03

1323

在vue.config.js（初始生成文件名为babel.config.js）中增加代码（ chainWebpack: config => { config.resolve.alias .set(’@’, resolve(‘src’)) } ）： const path = require('path') const resolve = dir => path.join(__dirname, dir) module.exports = { baseUrl: './', runti

Vue中配置@作为src根路径

计算机软件编程，包含Java、Php、Python、前后端、数据库等实战项目

10-29

4008

在跟src同级的根路径下找到vue.config.js中作如下配置： 'use strict' const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } const name = '学生信息管理系统' // page title module.exports = { publicPath: '/', outputDir: 'dist', assetsD

Vue中配置@为src目录的路径

weixin_45982960的博客

02-03

903

该配置要配置在jsconfig.json文件中 { "compilerOptions": { "baseUrl": "./", "paths": { "@/*":[ "src/*" ] } }, // @ 不能使用在以下文件中 "exclude": [ "node_modules", "dist" ] }

Vue CLI脚手架中@为什么表示src目录？

Mrs_Lupin的博客

06-10

311

在 Vue CLI 3.x 中，默认的 webpack 配置文件（vue.config.js）中已经包含了。这样做的目的是为了方便开发者导入项目中的模块，无需担心路径的复杂性。这是 Vue CLI 默认的别名配置，用于简化导入模块时的路径。这样一来，无论你在项目的哪个地方编写代码，都可以通过。在 Vue CLI（Vue.js 的脚手架工具）中，来快速引用项目中的模块，而不必关心具体的相对路径。符号通常表示项目的根目录，而不是单纯地表示。别名的配置，将其指向了。表示项目的根目录，因此。

关于webpack打包文件中有vue-router所引发的问题

qq_33745501的博客

05-14

1795

问题一：.webpack打包后页面无法显示解决方案：将路由配置中的mode参数改为默认值“hash”，才可以解决该问题。因为当mode值为history时，需要后端的支持。问题二：运行webpack-dev-server后，对于动态路由，当从其他页面转到动态路由页面时，可以正常显示。而在地址栏输入动态路由的地址时，页面不能正常加载解决方案：将路由配置中的mode参数改为默认值“hash”，可以解决...

Vue ＜router-link＞标签绑定@click点击事件失败

JZevin的博客

04-16

5735

失败原因 router-link标签本身会阻止click事件，使用常规的@click绑定点击事件自然会失败。解决方案 @click之后添加native修饰符。 <router-link to="/home" @click.native="changeRoute('home')"> 首页 </router-link> ...

Vue2.x常见问题

guizi0809的博客

04-13

782

适用于面试，开发场景

C:\Users\HUAWEI>npm list vue -g C:\Users\HUAWEI\AppData\Roaming\npm +-- @vue/cli@5.0.9 | `-- vue@2.7.16 +-- vue-router@4.5.1 | `-- vue@3.5.22 | `-- @vue/server-renderer@3.5.22 | `-- vue@3.5.22 deduped `-- vue@3.5.22 `-- @vue/server-renderer@3.5.22 `-- vue@3.5.22 deduped