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.js
import '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_ENV
const serverIp = env === 'production' ? prod.prodIp : dev.devIp
const 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.js
import 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.js
import 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 } // 引入全局公共组件
先写这么多，以后随着项目进度继续更新。
  分类：
 前端
 标签：
 Nuxt.js
 
   
      安装掘金浏览器插件
     多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
      
    向西引北风
        前端工程师