vue引入路径,vue项目根目录是哪个

　　本文主要介绍Vue如何配置根目录@(参考路径)，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　 Vue如何将根目录@Vue configuration @配置为src根路径

Vue如何配置根目录@

　　首先：@用于路径访问，减少层次引用。

　　@这是webpack设置的路径别名，默认指向src。

　　旧版本在build/webpack.base.conf文件中定义

　　新版本在根目录中创建，并在vue.config.js中定义

　　const path=require(path )

　　const resolve=dir=path . join(_ _ dirname，dir)

　　模块.导出={

　　baseUrl:“”。/,

　　runtimeCompiler: true

　　chainWebpack: config={

　　config.resolve .别名。set(@ )，resolve(src ))

　　}

　　}

　　默认情况下，在vue项目中定义了两个别名@(最常用的)和vue$。必要的话可以自己添加。

Vue配置@作为src根路径

　　在与src相同级别的根路径中找到vue.config.js，并进行以下配置：

　　使用严格

　　const path=require(path )

　　函数解析(目录){

　　返回path.join(__dirname，dir)

　　}

　　Const name=学生信息管理系统//page title

　　模块.导出={

　　公共路径：“/”，

　　输出目录：距离，

　　资产目录：静态，

　　configureWebpack: {

　　//在webpack的名称字段中提供应用程序的标题，以便

　　//可以在index.html访问它以插入正确的标题。

　　姓名：姓名，

　　解决：{

　　别名：{

　　//设置@/的含义

　　@: resolve(src )

　　}

　　}

　　}

　　}

　　注意vue.config.js是vue-cli3的配置文件。新建的项目可能没有这个文件，所以需要手动创建。

　　配置完成后，可以使用@作为vue中src的根路径配置，如下：

　　div class=login-center-left

　　H2 img src= @/assets/logo . png /{ { title } }/H2

　　/div

　　注意，在vue文件中，不能用@来获取style的css中的路径。CSS loader会把非根路径的url解释为相对路径，加上~前缀解释为模块路径(~ @代表根路径)，例如：

　　背景：rgb(73，123，199)URL( ~ @/assets/log in-BG . png )左侧居中

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。