nuxt 开发中遇到的坑二之准备阶段

1. 解决跨域问题

因为是前后端分离的开发模式，所以在项目准备阶段，跨域问题是面临的第一个问题 。 常见的解决跨域问题的方式有：

1）jsonp 模式

2）跨域资源共享（CORS）;主要由后端配置相关header字段完成

3）反向代理 ; 可以通过nginx 或者 webpack打包工具自带的proxy 属性配置。

在nuxt项目中，使用第三种方式解决跨域问题 ，具体方法如下:

  a) 下载依赖包  nuxt-proxy

  npm install @gauseen/nuxt-proxy -S

  b) 在 nuxt.config.js 文件中 的modules中引入

  c)  在nuxt.config.js 文件中 modules 同级 新增 proxyTable 属性 ， 配置如下：

这样，开发环境的 客户端请求接口的代理就配置好了。这样就结束了？ 答案当然是 no

因为nuxt 核心功能就是支持服务端的渲染，可以在node服务端向 后端接口 发送请求； 在node端发送的请求与浏览器端发送请求相比，区别是node的不存在同源策略的限制，不会存在跨域问题，所以node端的请求是不需要经过代理转发的。

通过这个结论，我们在封装ajax的时候，针对nuxt 服务端请求接口[通俗讲就是在asyncData 方法类发送的请求] 需要一点点特殊的处理，代码如下

完美，开发环境下，与接口通信的准备工作就好啦，按照上面配置，基本能保证与接口能顺利通信，如果还不能通信，建议看看代理的配置地方

2. css预编译语言的使用

css的预编译语言 有 less/sass/scss/stylus 等，我这里使用的是scss ，那么如何在nuxt项目中使用 scss呢？ 其实nuxt框架的webpack配置已经引入了loader，我们要做的只是把需要的相关依赖包准备好就好啦，流程如下 :

 a ) 下载依赖包 「一定要注意依赖包的版本，否则编译很可能报错」

 npm install   sass@1.26.8   sass-loader@8.0.2 -S

 b ) 然后直接在项目中使用就好了

3. scss 的全局的变量如何使用以及配置

在之前的项目中，想要使用全局变量的时候，需要导入到相应的组件内才能使用。 nuxt的框架中的全局变量，只要加好相应的配置，

可以直接在全局中使用。例如，我的全局变量文件

在项目里的使用：直接用就可以了

那么如何实现这样的功能呢? 流程如下:

a ) 下载依赖包 style-resources

npm install @nuxtjs/style-resources -D

b ) 在nuxt.config.js 中 的 modules 字段内引入依赖包

c ) 在nuxt.config.js 中 的 modules 字段同级，新增styleResources字段，内部引入需要在全局使用的文件

4. 关于第三方代码的引入

我的项目中引入了咨询功能的第三方代码 ， 第一次是在公共底部引用的，在开发环境完全没问题，但是打好包，发布到线上后发现，

浏览器报了错

可能是服务端处理的某个环节引起的，最后参考了css的引用方式，直接在nuxt.config.js 文件中的head属性中，引入相关文件就好了

结尾:

项目准备阶段工作基本差不多了，还有一些nuxt.config.js 的配置，可以参考文档看看，