使用Nuxt.js改造活动页面

简介

一个使用vue-cli搭建的H5活动页面，使用Nuxt.js改造。生成静态页面

备注：这种简单的活动页面推荐使用预渲染的方式生成静态页面。参考：Vue活动页面改成预渲染模式

实现

• 搭建项目：npx create-nuxt-app xxxx

• 将组件、样式、图片、公共方法等复制到对应的目录

• 在pages/目录下新建index.vue文件，将对应的页面代码复制过来

• 在plugins/目录下新建custom.js（文件名随意），将原项目src/main.js中对应引入的插件等复制过来

• 在根目录下新建config/目录

• 在config/目录下新建对应的多环境文件dev.env.js、sit.env.js、prod.env.js

export default {
  NODE_ENV: 'development',
  ENV_CONFIG: 'dev',

  urlApi: 'https://xxx.com:/xxx', // 接口地址
}

• 在config/目录下新建index.js文件

import dev from './dev.env'
import sit from './sit.env'
import prod from './prod.env'

let config = {}

switch (process.env.env_config) {
  case 'dev':
    config = dev
    break
  case 'sit':
    config = sit
    break
  case 'prod':
    config = prod
    break
}

export default config

• 修改package.json，添加多环境的配置

{
  // ...
  "scripts": {
    "dev": "cross-env NODE_ENV=development env_config=dev nuxt",
    "build:sit": "cross-env NODE_ENV=production env_config=sit nuxt build",
    "build:prod": "cross-env NODE_ENV=production env_config=prod nuxt build",
    "start": "nuxt start",
    "generate:sit": "cross-env NODE_ENV=production env_config=sit nuxt generate",
    "generate:prod": "cross-env NODE_ENV=production env_config=prod nuxt generate"
  },
  // ...
}

• 在plugins/目录下新建axios.js文件

import Vue from 'vue'
import axios from 'axios'
import appConfig from '@/config/'
import { Toast } from 'vant'

Vue.use(Toast)

// 创建axios实例
const request = axios.create({
  baseURL: appConfig.urlApi
  // timeout: 5000                  // 请求超时时间
})

// request请求拦截器
request.interceptors.request.use(
  config => {
    // ...
    return config
  },
  error => {
    Toast(error.message)
    return Promise.reject(error)
  }
)

// respone拦截器
request.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      Toast(res.desc)
      return Promise.reject(new Error('error'))
    } else {
      return res.data
    }
  },
  error => {
    Toast(error.message)
    return Promise.reject(error)
  }
)

export default ({ app, store, route, redirect }, inject) => {
  inject('axios', request)
}

• 在plugins/目录下添加vant.js文件

import Vue from 'vue'
import { Dialog, Popup } from 'vant'
// import 'vant/lib/index.less'

Vue.use(Dialog).use(Popup)
Vue.prototype.$dialog = Dialog

• 修改nuxt.config.js文件

export default {
  // ...
  env: {
    NODE_ENV: process.env.NODE_ENV,
    env_config: process.env.env_config
  },
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width,initial-scale=1.0,user-scalable=no' },
      { name: 'viewport', content: 'width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [
      { src: './js/xxx.js' }
    ]
  },
  /*
  ** Global CSS
  */
  css: [
    // 'vant/lib/index.less',
    '~assets/less/main.less'
  ],
  /*
  ** Plugins to load before mounting the App
  ** https://nuxtjs.org/guide/plugins
  */
  plugins: [
    { src: '@/plugins/custom', ssr: false },
    { src: '@/plugins/vant', ssr: true },
    { src: '@/plugins/axios', ssr: true },
  ],
  /*
  ** Auto import components
  ** See https://nuxtjs.org/api/configuration-components
  */
  components: true,
  /*
  ** Build configuration
  ** See https://nuxtjs.org/api/configuration-build/
  */
  build: {
    // 添加这个是关键，添加后babel才会处理依赖包vant里面的代码
    transpile: [ /vant.*?less/ ], 
    babel: {
      plugins: [
        ['import', {
          libraryName: 'vant',
          "style": (name) => {
            return `${name}/style/less.js`
          }
        }, 'vant']
      ]
    },
    // 配置让css放在单独的css文件中
    maxChunkSize: 300000,
    extractCSS: {
      // allChunks: true,
      filename: '[name].[chunkhash].css',
      chunkFilename: '[id].[chunkhash].css',
      ignoreOrder: true
    }
  }
}

当我们线上环境是http://xxx.com/index.html?k=xx的时候，是没有问题的。
但H5活动页面一般都在二级目录下，比如：http://xxx.com/xxx/index.html?k=xx

Nuxt.js不支持相对路径部署，我们需要使用绝对路径。假设线上路径：http://xxx.com/dist/index.html?k=xx

有两种方式设置：

• 通过给路由设置routerBase
• webpack设置output.publicPath，并且设置一个通用路由

• 方式一：修改nuxt.config.js文件，配置routerBase

export default {
  // ...
  router: {
    base: '/dist',
  },
  // ...
}

• 方式二：修改nuxt.config.js文件，设置webpack的output.publicPath

export default {
  // ...
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'notFound',
        path: '*',
        component: resolve(__dirname, 'pages/index.vue')
      })
    }
  },
  build: {
    extend(config, { isDev, isClient }) {
      if (!isDev) {
        // nuxt 不支持相对路径
        // config.output.publicPath = './_nuxt/'
        config.output.publicPath = '/dist/_nuxt/'
      }
    },
    // ...
  }
}

• 打包生成静态文件npm run generate:sit或者npm run generate:prod