问题1：vue设置代理
如果你的前端应用和后端API服务器没有运行在同一个主机上，你需要在开发环境下将API请求代理到API服务器。这个问题可以通过vue.config.js中的devServer.proxy选项来配置。
1.devServer.proxy可以是一个指向开发环境API服务器的字符串：
module.exports = {devServer: {proxy: 'http://localhost:4000'} }2.更多的代理控制行为：
module.exports = {devServer: {proxy: {'/api': {target: '<url>',ws: true,changeOrigin: true},'/foo': {target: '<other_url>'}}} }
问题2：vue项目打包完成之后为什么会出现空白页 ？怎么解决？
1.打包路径：
module.exports = {publicPath:'./' // 此处的路径，由具体情况决定 }2.路由模式：
hash：#
history：没有#
前端如果自己测试项目，直接将路由模式改为hash
项目上线要求是history模式，该怎么办？
前端不需要进行处理，只需要告诉后端，前端的路由模式为history，可使用重定向。
router/index.js const router = new VueRouter({mode:"history",base:process.env.BASE_URL,routes });
问题3：模式和环境变量
在项目中的根目录新建文件：
开发环境：.env.development
生产环境： .env.production
问题4：后端解决跨域问题
// 在routes中的index.js router.all('*', function(req, res, next) {res.header('Access-Control-Allow-Origin','*');res.header('Access-Control-Allow-Headers','Content-Type');res.header('Access-Control-Allow-Methods','*');res.header('Content-Type','application/json;charset=utf-8');next(); });
问题5：Vue路由模式
路由模式有两种：history、hash
区别：
1.表现形态不同
history： http://localhost:8080/about
hash : http://localhost:8080/#/about
2.跳转请求
（当没有找到页面--404）
history： http://localhost:8080/id ----》发送请求
hash： 不会发送请求
3.打包后前端自测要使用hash，如果使用history会出现空白页
问题6：介绍一下SPA以及SPA有什么缺点
SPA是什么？ 单页面应用
缺点：
1.SEO优化不好
2.性能不是特别好
问题7：Vue路径传值
1.显式（在url上是能看到所传递的值）
http://localhost:8080/about?a=1
1.1 传
this.$router.push({path:'/about',query:{a:1} })1.2 接
this.$route.query.a
2.隐式（在url上看不到传递的值）
http://localhost:8080/about
2.1 传
this.$router.push({name:'About',params:{a:1} })2.2 接
this.$route.params.a
问题8：路由导航守卫有哪些
全局、路由独享、组件内
使用场景：在进入某个页面之前进行判断拦截（点击订单的时候，先要判断是否已登录，如果已登录就next，若没登录就要跳转到登录页面）
1.全局
beforeEach、beforeResolve、afterEach
2.路由独享
beforeEnter
router.beforeEach((to, from, next) => {if(){next();}else{router.push('/login')next('/login')} })3.组件内（一般使用的少）
beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
问题9：Vue动态路由
并不是所有的项目都会用到动态路由
场景：详情页（文章、商品） ---- 多个信息共用一个页面
path:"/list/:id"
router.js配置
{path:"/list",name:"List",children:[{path:'/list/:id',name:'Details',component: () => import("../views/Details.vue")}],component: () => import("../views/List.vue") }
)
