如何配置Vue项目根目录，使其指向@代表src目录的详细步骤？

本文共计877个文字，预计阅读时间需要4分钟。

目录简介根目录的用法在Vue中的JS使用在Vue文件的CSS中使用vue-cli3及之后的配置步骤1：配置jsconfig.js步骤2：配置vue.config.jsvue-cli2的配置总结简介本文将简要介绍Vue项目的配置，包括根目录的用法、在Vue中的JS和CSS使用，以及vue-cli3及之后的配置方法。

根目录的用法在Vue项目中，根目录通常包含以下文件和文件夹：- src：存放源代码- public：存放静态资源，如图片、CSS、JS等- node_modules：存放项目依赖的模块

在Vue中的JS使用在Vue中，你可以使用JavaScript来编写组件逻辑。以下是一个简单的Vue组件示例：

javascript {{ title }}

在Vue文件的CSS中使用在Vue中，你可以使用CSS来美化组件。以下是一个简单的CSS示例：

cssh1 { color: red;}

vue-cli3及之后的配置vue-cli3及之后的版本提供了更强大的配置选项。以下是一些常见的配置：

步骤1：配置jsconfig.jsjson{ compilerOptions: { target: es5, module: commonjs, baseUrl: ., paths: { @/*: [src/*] } }}

步骤2：配置vue.config.jsjavascriptmodule.exports={ publicPath: '/', outputDir: 'dist', assetsDir: 'static', lintOnSave: false, productionSourceMap: false};

vue-cli2的配置在vue-cli2中，配置文件通常位于`config/index.js`中。

总结本文简要介绍了Vue项目的配置方法，包括根目录的用法、在Vue中的JS和CSS使用，以及vue-cli3及之后的配置。希望对您有所帮助。

目录

• 简介
• 根目录的用法
• 在Vue中的JS里使用
• 在Vue文件的CSS里使用
• vue cli3及之后的配置
• 步骤1：配置jsconfig.js
• 步骤2：配置vue.config.js
• vue cli2的配置
• 总结

简介

本文介绍vue如何配置根目录（用@代表src目录）。

默认情况下是不能用@代替/src的，需要经过配置才可以。

根目录的用法

在Vue中的JS里使用

vue通常会用@来代表项目的src目录。这样一来，输入路径时就不用输入/src了，可以直接用@来替换。

例如：有一个vue文件，路径为：/src/layout/index.vue，如下图所示：

如果直接导入，则代码应该这么写：

import Layout from '/src/layout'

如果使用@来替换，就更简洁了：

import Layout from '@/layout'

在Vue文件的CSS里使用

可以这样使用：

<div class="login-center-left"> <h2><img src="@/assets/logo.png" />{{ title }}</h2> </div>

注意

vue文件里style的css中不能使用@来获取路径，CSS loader 会把把非根路径的url解释为相对路径。

解决方案：加~前缀（~@代表根路径）。即：加~前缀才会解释成模块路径

例如：

background: rgb(73, 123, 199) url("~@/assets/login-bg.png") left center

vue cli3及之后的配置

步骤1：配置jsconfig.js

位置：项目根目录/jsconfig.js

{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, // @ 不能在以下目录的文件中使用 "exclude": ["node_modules", "dist"] }

步骤2：配置vue.config.js

位置：项目根目录/vue.config.js

法1：配置chainWebpack

'use strict' const path = require('path') const resolve = dir => path.join(__dirname, dir) module.exports = { chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) } }

法2：配置configureWebpack

'use strict' const path = require('path') const resolve = dir => path.join(__dirname, dir) module.exports = { configureWebpack: { name: 'vue Element Admin', resolve: { alias: { '@': resolve('src') } } } }

vue cli2的配置

webpack.base.conf（位置：项目根目录/config/webpack.base.conf）

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

总结

到此这篇关于vue配置根目录(用@代表src目录)的文章就介绍到这了,更多相关vue配置根目录内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！