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

推荐阅读更多精彩内容