vue2开发常见问题（一）

1.vue 获取json数据的某个属性成功,却报错undefined？

因为获取数据是异步的，而当你模板挂载完后，你的数据还没获取到就会出现此问题，解决用 v-if 在最外层嵌套一下。

2.v-html绑定的html元素对应的class不生效？

解决方法：查看当前组件样式是否加了scoped属性，scoped属性导致css仅对当前组件生效（用css3的属性选择器+生成的随机属性实现的），而html绑定渲染出的内容可以理解为是子组件的内容，子组件不会被加上对应的属性，所以不会应用css.

3.img的src,这样写<img src="{{img.uri}}">会报错？
原因:v-bind在写的时候不能用{{}},正确写法如下

<img :src="img.uri"/>
<img v-bind:src="img.uri"/>

4.关于vue页面闪烁{{msg}}?

[v-cloak]{
    display:none      
}

<div v-cloak>{{msg}}</div>

5.切换路由回到顶部

export default new Router({
    mode: 'history',
    scrollBehavior: () => ({y: 0}),
})

6.vue利用webpack配置生产环境和开发环境的接口地址

方法：（1）找到以下2个文件

/config/dev.env.js
/config/prod.env.js

 （2）这两个文件就是针对生产环境和发布环境设置不同参数的文件。我们打开dev.en.js文件。代码如下：

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

 我们在NODE_ENV下面增加一项，代码如下：

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API: '"//127.0.0.1/api"'
})

 然后，我们编辑prod.env.js文件

module.exports = {
  NODE_ENV: '"production"',
  API: '"//www.baidu.com/api"'
}

 （3）打开src/config/api.js文件，将原来开头的代码：

// 配置API接口地址
var root = 'https://cnodejs.org/api/v1'

 修改为：

// 配置API接口地址
var root = process.env.API

 7.vue项目打包后js和css路径问题

直接使用vue-cli开发项目，打包后发现js和css路径404，解决方法：找到/config/index.js，找到如下部分的代码

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',  //修改此处,变成：assetsPublicPath: './'
    productionSourceMap: true,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report,
    bundleCDN: process.env.npm_config_test || process.env.npm_config_preprod || process.env.npm_config_prod,
    cdn
  }