基于vue-cli2.0,推荐: vue-cli入门(三)——人员管理实例
1.执行:npm run build 后生成的dist打包文件直接放在服务器上显示空白?
解决:到config文件夹中打开index.js文件。
文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性:
assetsPublicPath属性作用是指定编译发布的根目录,‘/’指的是项目的根目录 ,’./’指的是当前目录。
2.背景图片的引用问题
资源里面的背景图片,不像index.html中加载资源一样,通过./static/js/app.js引用可以正常加载,图片资源是通过css加载的,如 background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2f00bf2.png) no-repeat所以我们要保留css引用图片的正常路径,即:
url(../../static/img/logo-index.2f00bf2.png) no-repeat
那么就需要修改build文件夹下的utils.js代码,如图所示:
3.vue-cli中全局scss文件
问题:我新建了一个scss文件定义一些变量规定了项目中所使用到的颜色,然后我想在各个组件的style中直接使用这些变量,但是目前一个组件就得导入这个scss文件一次,十分麻烦,请教大神有无比较简单的方法,一次导入即可在所有vue文件中访问到对应的变量。
解决方法:
步骤一: 安装sass-resources-loader
cnpm install sass-resources-loader --save-dev
步骤二: 修改build中的utils.js
scss: generateLoaders('sass')
修改成:
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/global.scss')
}
}
)