总结Nuxt遇到的坑

2018-09-02  本文已影响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端口之后会跨域失败

上一篇 下一篇

猜你喜欢

热点阅读