vue中常碰见的坑_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)

}