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

骑猪看日落 2021-08-28 16:36 1129阅读 0赞

默认会有‘@’别名，指向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中使用，可以加入‘~’也可以不加入‘~’。

生产包遇到路径问题  
相信你看到这里，也曾经无数次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文件中导入示例：

![format_png][]

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

![format_png 1][]

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

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

![format_png 2][]

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

![format_png 3][]

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

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

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

![format_png 4][]

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

![format_png 5][]

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

![format_png 6][]

[format_png]: /images/20210813/d7b303ec8bb24544ac2f161cec776325.png
[format_png 1]: /images/20210813/57975278a13a4feea7caee6b19492d6e.png
[format_png 2]: /images/20210813/2487900515ff4e2e97c1417b2626ad20.png
[format_png 3]: /images/20210813/6630bb6c7124474fba9a517be95e25ff.png
[format_png 4]: /images/20210813/b128438c717c4e5b9ea02994d4913e7a.png
[format_png 5]: /images/20210813/db1aa4a300104f24b24c97ffc941bc77.png
[format_png 6]: /images/20210813/0f1d662fae44464fad0db331cc0d54e4.png