配置webpack设置根目录

简介: 配置webpack设置根目录

配置webpack设置根目录

 

 

一、方法

通过 vue-cli 创建项目时,它会导入自己的组件。在导入组件时,代码给出了路径。

import Hello from '@/compements/Hello’

其中,@ 符号表示项目根目录中的 src 这一层目录。通过如下方法可以把 @ 和根目录中的 src 对应起来:

webpack resolve 节点下,与 extensions 平级,书写

alias

Resolve: {

'@'path.join(__dirname’./src')

这样@ 这个符号,就表示项目根目录中 src 的这一层路径,这样拼接得到的路径是绝对路径。

其中,alias: {//表示别名

如果不配置 @ 符号,用“.“也可以。

import Hello from './components/Hello'

相关文章
|
1月前
|
前端开发
webpack如何设置devServer启动项目为https协议
webpack如何设置devServer启动项目为https协议
139 0
|
7月前
|
JavaScript 测试技术
Webpack - Vue 配置开发环境与正式环境
Webpack - Vue 配置开发环境与正式环境
92 1
|
1月前
|
存储 前端开发 文件存储
webpack成长指北第5章---webpack的基础配置
webpack成长指北第5章---webpack的基础配置
25 0
|
7月前
|
JavaScript
Webpack 配置开发环境与正式环境
Webpack 配置开发环境与正式环境
47 0
|
3月前
|
人工智能 移动开发 前端开发
【利用AI让知识体系化】Webpack 相关配置技巧(三)
【利用AI让知识体系化】Webpack 相关配置技巧
|
3月前
|
人工智能 缓存 JavaScript
【利用AI让知识体系化】Webpack 相关配置技巧(二)
【利用AI让知识体系化】Webpack 相关配置技巧
|
3月前
|
人工智能 前端开发 JavaScript
【利用AI让知识体系化】Webpack 相关配置技巧(一)
【利用AI让知识体系化】Webpack 相关配置技巧
|
3月前
|
前端开发 JavaScript 开发者
webpack打包机制,构建过程和配置
webpack打包机制,构建过程和配置
19 0
|
4月前
|
JavaScript 应用服务中间件 nginx
nginx vue2+webpack 和 vue3+vite 配置二级目录访问
nginx vue2+webpack 和 vue3+vite 配置二级目录访问
116 0
|
4月前
|
JSON JavaScript 前端开发
Webpack的ts的配置详细教程
Webpack的ts的配置详细教程
47 0