nuxtjs填坑记录

“nuxt”: “^2.14.0”

this relative module was not found

https://github.com/nuxt/nuxt.js/issues/2713

兼容IE低版本浏览器

1. 安装

   npm install babel-polyfill -s

2. 引入 polyfill

   // plugins/ployfill.js
   import 'babel-polyfill';

3. 配置config.js

   // nuxt.config.js
   plugins: [
     { src: '@/plugins/polyfill' }
   ]

4. 跟目录下创建 .babelrc

   // .babelrc文件
   {
     "presets": [
       "es2015","stage-0","stage-3"
     ]
   }

解决IE9、IE10报错：

报错：

语法错误
  ** ./node_modules/@nuxt/components/lib/installComponents.js

原因：

nuxt2.13.3最新版本增加了自动注入compoent的功能；如果要兼容IE，请不要使用；

解决办法：

nuxt.config.js中
components: false; // 禁止自动注入component
同时，需要手动import各组件

其它问题问题记录

1. Property ‘$axios’ does not exist on type ‘Index’.

• you need to add “@nuxtjs/axios” to the types array here ‘tsconfig.json’
  https://axios.nuxtjs.org/setup/#typescript

2. IE9 axios response 需特殊处理

• /plugins/axios.js 见 _ie9Response方法

3. robots.js

• 开发、测试环境增加robots.txt文件

  User-agent: *
  Disallow: /

4. props.config.js

• 在build前生成props.json全局环境变量（区分开发、测试、正式环境）

5. nuxt An error occurred while rendering the page

• nuxt.config.js 修改配置 dev: false // 线上环境改为 process.env.NODE_ENV !== ‘production’

6. nuxt.config.js 配置 router.middleware

• 路由更改调用中间件，应用场景：权限校验，重定向等
  https://zh.nuxtjs.org/docs/2.x/directory-structure/middleware/#router-middleware
  https://zh.nuxtjs.org/docs/2.x/configuration-glossary/configuration-router/#middleware

7. This relative module was not found:

• yarn add node-sass sass-loader –dev
• package.json 升级版本 “@nuxt/typescript-runtime”: “^2.0.0”,

8. 全局环境变量 props

• nuxt.config.js 修改配置 head

  script: [{
    innerHTML: `var props = ${JSON.stringify(props)}`,
    type: 'text/javascript',
    body: false
  }],
  // https://vue-meta.nuxtjs.org/api/#dangerouslydisablesanitizers
  __dangerouslyDisableSanitizers: ['script']

参考资料

Nuxt开发经验分享，让你踩少点坑！

nuxt项目运行在ie报错

nuxt.js兼容ie浏览器的es6转码

nuxt项目兼容低版本ie

nuxt IE语法错误

The components Property

components-discovery