vue项目，webpack中配置src路径别名及使用

默认会有‘@’别名，指向src目录，还可以添加自定义别名等等。

使用方法
使用别名一般就三种情况：在js中用，在css中用，在html文档内用
js中用，最简单:

import {getName} from '@/util/name'

css中使用，需要加入“~”，并且不要写成字符串：

{background: url(~@/assets/img/04_2.jpg);background: url('~@/assets/img/04_2.jpg');//错了，这里有个坑，不能写成字符串，我就是因为这样写错了
}

html中使用，可以加入‘~’也可以不加入‘~’。

 <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">

生产包遇到路径问题
相信你看到这里，也曾经无数次npm run build，在很多问题中就是因为路径出现问题。
共享一个碰到的坑：
在config/index.js内可以设置打包后根目录，例如：

build: {index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/foreEnd/',//设置资源访问时前缀，当设置后，例如图片，css，js等文件的路径就会变为/foreEnd/……的绝对路径，你可以设置为‘./’保持相对路径。

图片以及一些静态资源尽量放入src/assets目录内，不要放入static目录内，访问不易出错。以@/assets/……方式访问。
在写路径时候，尽量不要使用绝对路径，请使用@别名方式访问资源。

在js文件或者vue文件的script标签中使用：

（1）、js文件中导入示例：

（2）、vue文件中导入示例：

css（scss）文件在scss或者vue的style标签中导入示例：

（1）、在scss文件中导入示例：

（2）、在vue的style标签中导入示例：

注意：css或者scss样式导入需要使用 ~@ 开头。

在vue的template模板标签中引入图片路径示例（两种方式均可使用）：

（1）、使用 ~@ 方式引入：

（2）、使用 @ 方式引入：

（3）、在scss 自定义方法中使用时必须使用 ~@ 方式引入：

vue项目，webpack中配置src路径别名及使用相关推荐

(三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串在public中添加HBuilderX的打包配置文件manifest.json
Vue 项目打包发布移动 App--npm run build打包 & vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuil ...
Vue之vue项目引入图片和设置路径别名
1.在vue项目中引入图片,图片放在static/img文件下,引用的时候这样写 <div class="img"><img src='static/img/fa ...
vue项目webpack打包配置
基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(12) 前言一.webpack配置 1.配置vue.config.js 2.配置Dl ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
spring boot中配置虚拟路径,用来映射显示图片
增加配置,继承 WebMvcConfigurerAdapter,如下: package com.wm.mogu_picture.config;import org.springframework.be ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
vue项目打包与配置-学习笔记
文章目录 vue项目打包与配置-学习笔记前端打包打包的代码如何运行打包指定不同的环境变量(开发,测试) 打包手动配置文件打包压缩,大文件处理 gzip进一步压缩打包app 打包部署模式 vu ...

vue项目，webpack中配置src路径别名及使用

vue项目，webpack中配置src路径别名及使用相关推荐

最新文章

热门文章