美文网首页
总结Nuxt遇到的坑

总结Nuxt遇到的坑

作者: 多少有点怕 | 来源:发表于2018-09-02 20:51 被阅读0次

    Sass css预处理

    1、添加sass依赖

    yarn add --dev node-sass sass-loader 或者 npm install --save-dev node-sass sass-loader

    2、设置nuxt.config.js

    build: { 
        extend(config, { isDev, isClient }) {
            const vueLoader = config.module.rules.find((rule) =>rule.loader ==='vue-loader'); 
            vueLoader.options.loaders.sass ='vue-style-loader!css-loader!sass-loader'; 
        }
    } // build
    

    请求跨域proxy / axios

    1、添加依赖

    yarn add @nuxtjs/axios @nuxtjs/proxy 或者 npm install --save @nuxtjs/axios @nuxtjs/proxy

    2、设置nuxt.config.js

    module.exports = {
      modules: [
        '@nuxtjs/axios',
        '@nuxtjs/proxy',
      ], // modules
      axios: {
        proxy: true,
        prefix: '/', 
        credentials: true,
      }, // axios
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:5000/',
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          } // /api
        } // pathRewrite
      } // proxy
    } // module.exports
    

    PS: axios配置必须填写,不然修改nuxt端口之后会跨域失败

    相关文章

      网友评论

          本文标题:总结Nuxt遇到的坑

          本文链接:https://www.haomeiwen.com/subject/jrfvwftx.html