使用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.jssit.env.jsprod.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文件,设置webpackoutput.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

创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: