vue中 路径使用的@和~的区别

设置别名
在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'

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',
       //设置资源访问时前缀，当设置后，例如图片，css，js
        等文件的路径就会变为/foreEnd/……的绝对路径，你可以设置为‘./’保持相对路径。
    assetsPublicPath: '/foreEnd/'

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