基础架构

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会比较丑。