自从开始用vue写项目后,前前后后也确实遇到不少问题,踩过不少坑,主要的一些问题总结一下:
1.如果同时运行多个vue项目,就会造成端口冲突,修改vue项目的端口就可解决
在项目的根目录下 config文件夹下index.js文件中,修改dev的port值就可以了,默认的是8086,修改成自己想要的端口好就可以了。
2.编译打包的问题
在项目的根目录下 build文件夹下webpack.base.conf.js文件中,module.exports对象下有output对象
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath:
process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
}
改为:
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath:
'./'
/*process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath*/
}
在这个状态下npm run biuld 打包编译就可以了。如果自己不想来回的切换publicPath值来预览和编译文件,可以在npm run dev的情况下,另开一个终端,把publicPath 改为编译状态,这个时候npm run build 编译,不会影响之前 npm run build 终端的运行状态的。
3.兼容IE9,虽说官方文档说明vue支持ie9,但是需要我们自己再去处理才可以在ie9中打开vue项目
1.安装npm包
npm install --save-dev -polyfill
2.修改webpack.base.conf.js
module.exorts={
entry: {
app: './src/main.js'
}
改为: entry: {
'babel-polyfill': 'babel-polyfill',
app: './src/main.js'
}
这样编译后的文件就可以在IE9中打开了。但是有时你会发现,还是打不开,在打开控制台的情况下,在刷新就会出现页面了,对于这个问题是ie的控制台脚本保护机制,我们需要重新定义console.log就可以了,在index.html中加上:
if(!window.console){
window.console={
log:function(msg){},
err:function(msg){}
}
}
想要在360中默认用极速内核打开网站可以在index.html中添加meta表签:
<meta name="renderer" content="webkit">
4.vue集成jquery zepeto bootstrap等
对于juery的引入有另种方法
一 .直接在main.js引入jquery.js文件
二, webpack引入
1.修改build文件夹下面的webpack.base.conf.js文件
在头部加入:
var webpack = require('webpack')
然后在
module.exports = {
entry: {
app: './src/main.js'
},
后面加
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
]
2. 在入口文件main.js中加入 import $ from 'jquery'
引入bootstrap
1、修改webpack.base.conf.js文件:
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': path.resolve(__dirname, '../src/assets'),
'jquery': "jquery/src/jquery"
}
2、在入口文件main.js中加入:
import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'
3、在assets文件目录中拷贝bootstrap各种文件
cs js font文件s等
网友评论