Nuxt 项目搭建踩坑问题记录

初学Nuxt， 以下如有不对请指出谢谢！

1. Nuxt环境搭建框架
   npx create-nuxt-app <项目名>
2. 根据自己需求选择 UI框 服务器 测试框架等
3. Nuxt配置端口号，在根目录的Package.json文件里面修改IP和端口号

"config": {
  "nuxt": {
    "host": "localhost",
    "port": "2345"
  }
}

4. 安装axios // npm install @nuxtjs/axios -d
   配置 nuxt.config.js 可根据自己项目需求配置 是否跨域 安装@nuxtjs/proxy

modules: [
    '@nuxtjs/axios'
  ],
  axios: {
    prefix: '/',
    proxy: false // Can be also an object with default options
  },
  server: {
    port: 2345,     // default: 3000
    host: 'localhost' // default: localhost
  },

head配置项里配置可以配置meta标签相当于html的head

部署完网站，查看源码发现里面有一段window.__nuxt=，去除方法查到两种

1. 百度搜索好多都是改源码（貌似有副作用）
   nuxt2.7.1版，路径：\node_modules\nuxt\node_modules@nuxt\core\node_modules@nuxt\vue-renderer\dist\vue-renderer.js

// 注释代码1， 禁止在页面初始化时添加window.__NUXT__代码
APP += `<script>${serializedSession}</script>`;  

// 注释代码2   禁止在页面路由改变时更新window.__NUXT__代码
hash.update(serializedSession);
cspScriptSrcHashes.push(`'${csp.hashAlgorithm}-${hash.digest('base64')}'`);

2 通过工具包cheerio操作dom找到window.__nuxt，然后移除。

npm install cheerio //安装cheerio包

// 修改nuxt.config.js
const cheerio = require('cheerio');
export default {
hooks: {
    'render:route': (url, result) => {
      this.$ = cheerio.load(result.html, { decodeEntities: false });
      //由于window.__nuxt__总是位于body中的第一个script中，
      //所以我移除了body中第一个脚本标签
      this.$(`body script`).eq(0).remove();
      result.html = this.$.html()
    }
  }
}

解决ElementUI默认英文问题

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(Element, { locale })

nuxt 引入 swiper

npm install swiper vue-awesome-swiper --save
package.json中可以看到插件版本(高版本swiper 分页器和自动播放可能不显示，不知后来有没有更新）

image.png
在plugins中新建vue-swiper.js文件，并保存以下内容：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

在nuxt.config.js配置文件中添加如下内容

  css: [
    'swiper/css/swiper.css' // 5.x
  ],
  plugins: [
    '@/plugins/vue-swiper'
  ],

注意 - 官方对于不同版本配置有说明

image.png

AsyncData 接收参数页面手动刷新后数据清空, AsyncData 方法里不能用本地存储 可以用 js-cookie。 在asyncData中进行ajax请求时时候一定要记得捕获catch异常没不然会出现server error。