Vue开发踩坑-Day2

Vue开发踩坑-Day2

• 还是babel编译错误，对于element-ui的配置。昨天的还是不行......

最终配置：

// vue.config.js
const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('thejs')
      .test(/\.js$/)
      .include
      .add(path.resolve('src'))
      .add(path.resolve('node_modules/element-ui/packages'))
      .end()
      .use('babel-loader')
      .loader('babel-loader')
      .end()
  },
  configureWebpack: {
    resolve: {
      alias: {
        'components': '@/components',
        'assets': '@/assets',
        'api': '@/api',
        'views': '@/views',
        'store': '@/store',
        'common': '@/common'
      }
    }
  },
  assetsDir: 'static'
}

//babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

• 前端报错真的很恶心啊，有的错误只会带偏自己。然后搜索了一下debugger相当于断点，打开调试工具后代码会会暂停。（封装axios实例时，一定要返回promise）
• 考虑到用户信息储蓄到本地问题，以前的一个项目是使用cookies，随着技术思维的形成，发现以前真傻，其实对于单页应用来说，并不一定需要cookie来储存本地数据，浏览器有自带的接口储存数据(Web Storage API)。然后查了MDN（这个网站是个好东西）
  上面有一问题：当用户使用无痕浏览是，有的浏览器会报错，应为为了保护用户隐私，本地储存会被禁用。解决方案可以使用cookie，但是有的可能cookie也用不了。所以最终解决办法是加以判断try...catch，然后提示用户关闭无痕或者启用cookie