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 自定义方法中使用时必须使用 ~@ 方式引入：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。