设置别名
在build文件夹下的webpack.base.conf.js文件中设置src的路径别名。
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'#': resolve('src/assets')
}
},
默认会有‘@’别名，指向src目录，还可以添加自定义别名等等。
使用方法
使用别名一般就三种情况：在js中用，在css中用，在html文档内用
js中用，最简单:
import {getName} from '@/util/name'
1
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">
1
生产包遇到路径问题
相信你看到这里，也曾经无数次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/……方式访问。
在写路径时候，尽量不要使用绝对路径，请使用@别名方式访问资源。
转：https://blog.csdn.net/qq_29018891/article/details/90381333