这是我参与「第四届青训营 」笔记创作活动的第28天

vue配置代理服务器

当遇到跨域问题时，服务器没有配置允许跨越，这时就应该配置代理服务器

module.exports = defineConfig({ // 在vue.config.js中配置以下代码
  devServer: {
    proxy: {
      '/api1': { // 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:3000', // 代理目标的基础路径
        changeOrigin: true, // 服务器收到的请求头中的host为：localhost:3000
        pathRewrite: { '^/api1': '' }
      }
    }
  }
})

本地存储

在做vue项目时, 经常使用本地存储, 就会用到JSON.stringify()和JSON.parse()

    JSON.parse(getLocalStorage()) // 里面如果是null或underfined则会报错
    // 所以应该判断一下
    getLocalStorage() ? JSON.parse(getLocalStorage()) : []

JSON.stringify()和JSON.parse()也会用在深拷贝这一方面

const obj = {
  name: 'zs',
  age: 18,
  info: {
    sum: '20',
    hoobby: ['读书', '写字', '锻炼']
  }
}
const obj1 = JSON.parse(JSON.stringify(obj)) // 深拷贝
 // 此时修改obj1不会影响到obj

router页面配置用户访问不存在的页面

  { // 放在最后面
    path: '/:pathMatch(.*)*',
    component: () =>
      import(/* webpackChunkName: "NotFount" */ '@/views/NotFound') // 路由懒加载
  }

vue传值问题

问题：

vue的子组件在created/mounted里获取不到props的值

原因：

1. 父组件传的值明明已经传过来了 但是在子组件里却获取不到
2. 在挂载的回调里拿不到props 大概率是因为在该组件渲染的时候，父组件还没有值传递给它因为父组件传的值获取也需要时间
3. 这就导致子组件已经创建了，但是父组件所请求的值还没有返回， 故父组件无法传递最新的props数据

解决：

用watch监听父组件传的值，一旦父组件传的值过来了，就会触发watch事件，

vue项目打包后

问题：

当你打开dist文件夹下的html文件，在浏览器允许时会报资源错误

原因：

html文件引入其他资源文件都是以/为开头的路径 , 而webpack访问的是vscode根目录，而不是相对路径下的目录

解决

在vue.config.js文件中配置以下代码

    module.exports = defineConfig({ 
         publicPath: './'
         // 或者 publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
    })