vue-cli入门（二）-vue-cli2.0的项目结构和入门实例

基于vue-cli2.0，推荐： vue-cli入门（三）——人员管理实例

1.执行：npm run build 后生成的dist打包文件直接放在服务器上显示空白？

解决：到config文件夹中打开index.js文件。
文件里面有两个assetsPublicPath属性，更改第一个，也就是更改build里面的assetsPublicPath属性：

image.png

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代码，如图所示：

image.png

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')
        }
   }
)