前后端分离踩坑记
基础架构
vue + element-ui + laravel
session/token 登录状态保持,前后端分离引起的跨域问题。
要支持跨域通过一下操作
使用axios包,在main.js中添加如下代码:
axios.defaults.withCredentials=true;
Vue.prototype.$axios = axios;
在nginx 的配置中增加如下示例代码
add_header Access-Control-Allow-Origin http://localhost:8081;
add_header Access-Control-Allow-Headers *;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS,PATCH,PUT;
add_header Access-Control-Allow-Credentials true;
axios get、post方法注意事项:
1.get请求拼接在接口后边即可
this.$axios.get('/xxx?a='+b).then(function(res) {
}, function() {});
或者
params_demo = {a:1,b:2};
this.$axios.get('/xxx',{params:params_demo}).then(
function(res) {},
function() {});
2.post请求及需要对象方式传参
params_demo = {a:1,b:2};
this.$axios.post('/xxx',params).then(
function(res) {},
function() {});
设置访问代理
编辑 webpack.dev.config.js
增加如下示例代码:
devServer: {
proxy: {
'/api/*': {
target: 'http://gxt.develop.test',
changeOrigin: true,
}
}
}
#举例如下
module.exports = merge(webpackBaseConfig, {
devtool: '#source-map',
devServer: {
proxy: {
'/api/**': {
target: 'http://gxt.develop.test',
changeOrigin: true,
}
}
},
output: {
publicPath: '/dist/',
filename: '[name].js',
chunkFilename: '[name].chunk.js'
},
plugins: [
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
filename: 'vendors.js'
}),
new HtmlWebpackPlugin({
filename: '../index.html',
template: './src/template/index.ejs',
inject: false
})
]
});
main.css 打包出来样式错乱
在style标签上添加scoped属性,就表示它的样式作用于当下的模块
<style scoped>的scoped属性:
1)加了scoped属性的组件,可以维护当前组件样式不受其它组件影响
2)加了scoped属性的父级组件,不能修改子组件元素样式(无路子组件加没属性scoped,因为scoped只能维护当前组件元素)
3)不加scoped属性的父级组件,可以修改子组件样式
4)加了scoped属性的父级组件,也可以强行控制加了scoped属性的子组件,方法是:.a >>> .b或者css预处理中的 .a /deep/
生产环境打包之后 路由错误
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!
不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。
所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
如果在路由配置中是如下配置的,需要在服务端nginx中增加
main.js中按一下方式配置路由的
// 路由配置
const RouterConfig = {
mode: 'history',
routes: Routers
};
在nginx配置中需要参考一下配置
location / {
#root html;
#index index.html index.htm;
try_files $uri $uri/ /index.html;
#proxy_pass http://mynginx;
}
如果main.js中路由配置mode为默认的hash模式
// 路由配置
const RouterConfig = {
routes: Routers
};
则后端无需做任何配置,但是页面的url会比较丑。