简介
一个使用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
发表评论