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
·
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/……的绝对路径,你可以设置为‘./’保持相对路径。
更多推荐
已为社区贡献16条内容
所有评论(0)