Nuxt.js项目搭建配置踩坑-白红宇

公司项目需要用到nuxt.js的服务端渲染，所以使用了nuxt.js官方的脚手架搭建了项目，在这儿记录一些搭建过程中踩过的坑。

IE9的适配问题

IE9是一个老大难的问题，因为它不支持ES6的语法，而且ie9也不知路由中的history模式，所以我在这儿暂时的解决办法如下。

// nuxt.config.js   /*   ** Global router middleware   */  router: {    mode: 'history',    middleware: 'global',    fallback: true   },复制代码

先在设置一下fallback，具体不知道为什么看文档，最重要的是设置babel-polyfill。

yarn add babel-polyfill --dev复制代码

// plugin 下 新建babel-polyfill文档下的index.jsimport 'babel-polyfill'复制代码

// nuxt.config.js  plugins: [    { src: '@/plugins/babel-polyfill', ssr: true } // 将es6转换为es5 兼容ie9  ],复制代码

// 在文档根目录下新建 .babelrc 文件{  "presets": [    [      "env",      {        "modules": false,        "useBuiltIns": "entry"      }    ],    "stage-3"  ]}复制代码

至此，项目就能在ie9上运行起来了，可能开发中还会有问题，到时候会进行补充。

全局样式变量的引入和全局样式的引入

因为开发时项目使用的css预编译器是scss，所以注册全局的样式变量如下。

先安装scss预编译器

npm i node-sass sass-loader scss-loader --save-dev复制代码

// nuxt.config.js 中配置 styleResources  css: [    {      src: '~/assets/styles/index.scss',      lang: 'scss'    }  ],  modules: [    // Doc: https://axios.nuxtjs.org/usage    '@nuxtjs/axios',    '@nuxtjs/pwa',    '@nuxtjs/eslint-module',    '@nuxtjs/style-resources'  ],  build: {    transpile: [/^element-ui/],    styleResources: {      scss: './assets/styles/variable/index.scss'    },    /*     ** You can extend webpack config here     */    extend(config, ctx) {}  }复制代码

Vue 全局注入函数和属性值

有时您希望在整个应用程序中使用某个函数或属性值，此时，你需要将它们注入到Vue实例（客户端），context（服务器端）甚至 store(Vuex)。按照惯例，新增的属性或方法名使用$作为前缀。

其实这个有，但是我还是再写一遍加深一遍记忆。

比如说我想全局使用我定义的接口路径。

// urls -> index.js (PS:一定要写在plugins文件目录下)import Vue from 'vue'import dev from './dev'import prod from './prod'// 判断是生产环境还是开发环境const env = process.env.NODE_ENVconst serverIp = env === 'production' ? prod.prodIp : dev.devIpconst interfacePORT =  env === 'production'    ? `${prod.prodInterfacePort}${        prod.prodName === '' ? '' : '/' + prod.prodName      }`    : `${dev.devInterfacePort}${dev.devName === '' ? '' : '/' + dev.devName}`const serverUrl = 'http://' + serverIp + '/'const interfaceUrl = 'http://' + serverIp + ':' + interfacePORT + '/'// 同时注入context 和 Vue中，在Vue中会自动加上在前面加上$ export default ({ app }, inject) => {  inject('serverUrl', serverUrl)  inject('interfaceUrl', interfaceUrl)}复制代码

// nuxt.config.js  plugins: [    { src: '@/config/url', ssr: false }, // 接口地址的全局引入  ],复制代码

然后就可以在项目中全局引入

export default {  mounted(){    console.log(this.$interfaceUrl)  }  asyncData(context){    console.log(context.app.$interfaceUrl)  }}复制代码

Vue 全局注册组件

首先，先创建一个*.vue文件，我的文件名叫MyViewer.vue，然后在全局注册这个组件，代码如下。

// 文件目录为 src/components/common/index.jsimport MyViewer from './MyViewer'const globalCom = function(Vue) {  if (globalCom.installed) return  globalCom.installed = true  Vue.component('MyViewer', MyViewer)}export default globalCom复制代码

然后，在nuxt.js中的plugins文件目录下创建文件夹common-components用于在nuxt.config.js中注册，代码如下。

// 文件目录为 src/plugins/common-components/index.jsimport Vue from 'vue'import globalCom from '@/components/common'Vue.use(globalCom)复制代码

最后，在nuxt.config.js中引用它，代码如下。

/*   ** Plugins to load before mounting the App   * 在这里注册插件   */  plugins: [    { src: '@/plugins/common-components', ssr: false } // 引入全局公共组件  ],复制代码

先写这么多，以后随着项目进度继续更新。