vue“@”和“~” 的使用

vue“@”和“~” 的使用

1. 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目录，还可以添加自定义别名等等。

2. 使用方法

  使用别名一般就三种情况：在js中用，在css中用，在html文档内用

  1) js：相对路径或者@

// import '~@/assets/css/about.css' // 报错
import '@/assets/css/about.css' // 成功
// import '../assets/css/about.css' // 成功

  2) css中使用，相对路径或者~@，并且不要写成字符串：

/* @import '../common/common.css';  */
/* 成功 */
@import '~@/assets/common/common.css';
/* 成功 */
.box-font {
  font-size: 24px;
  color: aliceblue;
}
.bg {
  width: 200px;
  height: 200px;
  /* background: url(~@/assets/logo.png) no-repeat; */
  /* 必须有~@，单独~或者@都不行 */
  background: url(../logo.png) no-repeat;
  /* 成功 */
  /* background: url('../logo.png') no-repeat; */
  /* 失败 不要写成字符串*/
}

  3) html中使用，使用相对路径或者~@(可以加入~也可以不加入~)。

    <img src="~@/assets/logo.png" alt="">
    <!-- 成功 -->
    <img src="~@/assets/logo.png" alt="">
    <!-- 成功 -->
     <img src="../assets/logo.png" alt="">

  注意：

  图片以及一些静态资源尽量放入src/assets目录内，不要放入static目录内，访问不易出错。以@/assets/……方式访问。

  在写路径时候，尽量不要使用绝对路径，请使用@别名方式访问资源。

  打包：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/……的绝对路径，你可以设置为‘./’保持相对路径。