搭建新项目心得总结

参考文章：https://blog.csdn.net/Stiven_Lu/article/details/80271012

笔记：

history没有#，默认的是hash模式，带#（我用的是hash模式，两种模式似乎写路由的方法不一样）

项目结构

在pages---router--index.js中写

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  // mode:'history',
  routes: [
    {
      path: '/index.html/',
      component: resolve => require(["@/view/index/login"], resolve),
    },
   //hash模式必须写path:/。history模式不用写
    {
      path: '/',
      name:'loginindex',
      component: resolve => require(["@/view/index/login"], resolve)
    }
]

多页面之间的跳转

 window.location.href ='/index.html#/'

路由的重定向

{
  path:'/generalManager',
  component:resolve => (require(["@/view/travelagency/Manager/generalManager"],resolve)),
 // redirect: '/LineManagement',   //这样写也可以,但路径为LineManagement
  children:[ 
    {
       path:'/',
       redirect:'./LineManagement'    //path为/,重定向为./则路径为generalManager/LineManagement
     },
     {
        path:'LineManagement',
        name:'LineManagement',
        component:resolve =>(require(["@/view/travelagency/Manager/LineManagement"],resolve)),
        meta:{title:"线路管理",requiresAuth: true}
      }
}

路由的监听

 watch:{
        $route(to,from){
             console.log(to)   //要去的路由
             console.log(from)   //从哪里来的路由
            // this.getmeta=to.meta.title     //获取meta字段,渲染时无法执行,换种写法
        }
    }

面包屑，获取meta字段

getMeta(){
    const length=this.$route.matched.length
    this.getmeta=this.$route.matched[length-1].meta.title
}

键盘登录事件

 var that=this     //拿不到this,需转换
 document.onkeypress = function(e) {
    if (e.which == 13 || e.charCode==13 || e.keyCode==13) {
       that.userlogin()
       return false;
     }
   };

cookies存值

参考文件：https://www.cnblogs.com/Hades123/p/11454764.html     https://www.cnblogs.com/s313139232/p/9341762.html

this.$cookies.set('weihua','10026','0')

跨域问题

前端解决（vue反向代理）在config---index.js找到 proxyTable

 proxyTable: {
      '/api': { //将http://192.168.1.51:8080/grain印射为/api
        target: 'http://192.168.0.18:8066/',//接口域名
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '*'
        }
      }
    },

①总是报错跨域，请求方式总是options，在百度中学习到了很多。

简单请求和复杂请求

解决方式，后端未处理复杂请求。因版本的不同，之前不需要处理复杂请求。

打包步骤

①安装generate-asset-webpack-plugin插件

npm install --save-dev generate-asset-webpack-plugin

②在build配置webpack.prod.conf.js文件

// 让打包的时候输出可配置的文件 
let GenerateAssetPlugin = require('generate-asset-webpack-plugin'); 
let createServerConfig = function(params){
	let oApi = {
    baseURL: "http://192.168.0.18:8099", 
    imgapi: "http://192.168.0.18:8099",
    AddressType: "http://192.168.0.18:8099",
	};
	return JSON.stringify(oApi);
}

 

③写在 plugins[] 内

 // 让打包的时候输入可配置的文件

new GenerateAssetPlugin({

  filename: 'serverconfig.json',

  fn: (compilation, cb) => {

      cb(null, createServerConfig(compilation));

  },

  extraFiles: []

}),