nuxtjs项目创建后的内容配置

nuxtjs项目创建后的内容配置

1、运行地址更改

因为nuxtjs默认的运行地址是http://localhost:3000/，一个防止3000端口被占用，二个方便同网下便于查看测试，我们可以将其更改为本机的ip。我们可以在package.json文件中加入以下代码

"config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "3000"
    }
 }

再次运行会发现运行地址已经是本机的ip地址了(端口号占用可以换一个)（注意如果不是加在最后，别忘了添加英文逗号）

2、全局设置接口地址

我们需要通过接口地址从后端获取数据，用于页面渲染，而在正常vue项目中我们可以封装axios用来进行数据获取，但是在nuxtjs我初学也没有找到相关例子只能按照nuxtjs文档进行。因此不可能每个接口都去写上地址url，需要统一配置：
（1）首先nuxt配置全局接口地址需要用到cross-env,先检查有没有这个依赖，没有的进行安装就好

npm install  cross-env -save
*cross-env --跨平台设置及使用环境变量包

（2）在package.json文件修改配置(BASE_URL=测试域名或正式域名)（注意代码规范）

"scripts": {
    "dev": "cross-env BASE_URL=接口地址 NODE_ENV=development nuxt",
    "build": "cross-env BASE_URL=接口地址 NODE_ENV=production nuxt build",
    "start": "cross-env BASE_URL=接口地址 NODE_ENV=production nuxt start", 
　  "generate": "cross-env BASE_URL=接口地址 NODE_ENV=production nuxt generate" 
},

（3）在nuxt.config.js文件添加env配置(env是environment环境的意思)

env: {
    BASE_URL: process.env.BASE_URL,
    NODE_ENV: process.env.NODE_ENV
  },

（4）通过process.env.BASE_URL引用即可

这里是引用

3.配置head信息正常nuxt.config.js中的meta中是没有keywords，需要自己添加，这个位置一般都是页面的默认头部信息，如果页面需要自定义，在页面中单独配置即可（跟mounted同级）

script中我们一般添加的都是网络地址，如果实际需要添加本地js到head中，看网上说可以创建一个app.html的文件单独配置就行。后面我发现favicon可以通过link添加，那script其实性质差不多，是否也可行；
（1）将需要添加到head中的js文件放入static文件夹
（2）直接在script中引入，我成功在head中找到了我的文件

4.网页源代码出现大量css样式处理

我们正常在css中添加我们的公共css样式，他们会在网页源代码中全部显示出来，才会显示body内容。

这个时候我们在build中添加extractCSS: { allChunks: true }属性就可以避免这种问题

5.补充一个使用swiper的坑

（1）在vue结构中我们一般使用vue-awesome-swiper，但是这个时候注意，除了这个我们还需要安装相对应版本的swiper。不然找不到css文件会一脸懵（我刚开始就是这样，一直报错）
（2）网上的教程基本是说使用swiper类名，不要直接使用swiper的标签。我在版本正确的情况下，实际发现还是可以直接使用标签形式的
（3）我使用的两者版本以及用法，css文件和全局使用的js方法在nuxt.config.js引入就好

'swiper/css/swiper.css',  //注意不同版本可能位置不一样

{src: "@/plugins/vue-awesome-swiper.js", ssr: false},

vue-awesome-swiper.js是自己在plugins文件夹中自己新建的，内容基本如下：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

暂时发现的有用配置就是这些了 后续有新的再补充进来！！