vue学习中遇到的坑

定义组件名

在引用组件时，不要用html关键字作为名字，这样在解析的时候它会当成html元素来解析
例如:

//html


//引入button组件
import button  from '../../components/button/Button'  

//声明组件
components:{
  button
}

即便引入了button组件，但是因为与html原生元素撞名了，在渲染html的时候还是会渲染成原生html元素。

无法取得页面的dom结构

组件一般是在mounted之后才会渲染出dom结构，如果需要获取dom结构，请在mounted之后。如果还是不行，请使用api:vue.$nextTick([callback,context])

打包后404

将配置文件里的buildi资源路径改成相对路径
assetsPublicPath: './'

history模式

//测试环境
URL:https://10.21.1.210:8443/test/home
//假设项目不在根目录时，而是在test目录下

在router的index中设置：

const router = new VueRouter({
    mode: "history",
    base:'/test/',
    //添加这句是为了保证页面不会空白(虽然资源加载正常)
    //若是项目直接放在根目录下，则可忽略这句，base的默认路径是'/'
    routes: [
        {
            path: '/',
            redirect: '/login'//重定向
        },
        {
            path: "/index", 
            component: PageIndex
         }
    ]
}

如果服务端的环境经常变动，可以写下列写法

const router = new VueRouter({
    mode: "history",
    routes: [
        {
            path: '/',
            redirect: '/login'//重定向
        },
        {
            path: "/index", 
            component: PageIndex
        }
    ]
})

if (process.env.NODE_ENV === "production") router.base = window.location.pathname

//【process.env.NODE_ENV是采用vue-cli的webpack提供的参数】

在服务端还需要设置几句话，否则会出现404
详细设置可以查看vue-router文档

将开发模式下的http改成https

用vue-cli创建的vue项目基本都是以node为后台，引用了express的包，所以我们只需要把原先在build/der-server.js中的语句

var server = app.listen(port)

改成如下写法：

var https = require('https');
var fs = require('fs');
var options = {
  key: fs.readFileSync('/* replace me with key file's location */'),
  cert: fs.readFileSync('/* replace me with cert file's location */'))
};
var server = https.createServer(options, app).listen(port);

v-for改变数据时，ui不会动态加载

设置vue.set( target, key, value)，会使得页面重新渲染

设置background以及iconfont的时候出现404

第一种方案：
just modify the publicPath for url-loader like

 test: /\.(png|jpe?g|gif)(\?.*)?$/,
 loader: 'url-loader',
 options: {
             limit: 10000,
             name: utils.assetsPath('img/[name].[hash:7].[ext]'),
             publicPath: env === 'production' ? '../../' : '/'
}

or第二种方案：
针对这个问题，主要是需要单独为 css 配置 publicPath 。
ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api，可以为css单独配置 publicPath 。

对于用 vue-cli 生成的项目，dist 目录结构如下：

dist
├── index.html
└── static
    ├── css
    ├── img
    └── js

经常遇见的问题是 css 中 background-image 的相对路径不能正确的引用到 img 文件夹中。但是用 ExtractTextWebpackPlugin 的 publicPath 配置就可以。

更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',         // 注意配置这一部分，根据目录结构自由调整
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

附上：extract-text-webpack-plugin 的文档