最近因工作需要，使用nuxt开发了一套移动端H5页面。其中nuxt的配置过程中遇到了许多坑，今天项目提测。在这里记录下相关配置
nuxt.config.js相关配置
const WebpackAliyunOss = require('webpack-aliyun-oss')
const oss = require('./oss.js')
const API_ENV = process.env.API_ENV // 这里是我代码调动接口的全局参数 比如 qa、qa2、dev
const ossPath = '//我的oss地址'
const projectPublicPath = `${ossPath}/${API_ENV}/`
const distPath = `wangxiao/${API_ENV}/` // oss地址下的文件目录
module.exports = {
mode: 'universal', // 使用本地静态化部署。
/*
**这里是定义一些全局的webpack变量。使用cross-env传入的参数 需要在此处定义 才能可以在代码中取到。
*/
env: {
NODE_ENV: process.env.NODE_ENV || 'development',
API_ENV: process.env.API_ENV
},
/*
** 页面的头部信息包括 meta、link、script等
*/
head: {
title: '我的title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' },
{
hid: 'keywords',
name: 'keywords',
content:
'我的content'
}
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: './favicon.ico' } // 默认路径为/favicon.ico 如果不是在根目录下部署。将此处路径改为.favicon.ico即可
]
},
/*
** 自定义progress-bar的颜色
*/
loading: { color: '#F77702' },
/*
** 需要全局引入的css样式
*/
css: [
{ src: 'vant/lib/index.css' },
'@/assets/default.less'
],
/*
** 需要全局引用的js插件等，ssr:true则服务端渲染是返回
*/
plugins: [
{ src: '@/plugins/vant', ssr: true },
{ src: '@/plugins/rem', ssr: false },
{ src: '@/plugins/api', ssr: false },
{ src: '@/plugins/cookie', ssr: false },
{ src: '@/plugins/router', ssr: false }
// { src: '@/plugins/vconsole', ssr: false }
],
/*
** Nuxt.js dev-modules dev 开发时的一些eslint stylelint 校验
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
// '@nuxtjs/eslint-module',
// Doc: https://github.com/nuxt-community/stylelint-module
// '@nuxtjs/stylelint-module'
],
/*
** 路由相关配置
*/
router: {
base: process.env.NODE_ENV !== 'development' ? '/discountActivity/' : '/',
// 为项目增加默认路由。若找不到路由则跳转此页面
extendRoutes (routes, resolve) {
routes.push({
name: 'default',
path: '*',
component: resolve(__dirname, 'pages/index.vue')
})
}
},
// 配置url-loader: 图片大小小于10000的将被转为base64
loaders: {
imgUrl: { limit: 10000 }
},
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
// '@nuxtjs/axios'
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
},
/*
** 默认dev启动的本地服务相关配置
*/
server: {
port: 3001, // default: 3000
host: '0.0.0.0' // default: localhost
},
/*
** Build configuration
*/
build: {
// analyze: true,
extractCSS: process.env.NODE_ENV !== 'development', // 是否将css 提取到单独文件
/*
** You can extend webpack config here
** webpack 相关配置。 文件打包名称配置
*/
filenames: {
app: ({ isDev }) => (isDev ? '[name].js' : 'js/[id].[chunkhash].js'),
chunk: ({ isDev }) => (isDev ? '[name].js' : 'js/[id].[chunkhash].js'),
css: ({ isDev }) => (isDev ? '[name].css' : 'css/[id].[contenthash].css'),
img: ({ isDev }) =>
isDev ? '[path][name].[ext]' : 'img/[name].[hash:10].[ext]',
font: ({ isDev }) =>
isDev ? '[path][name].[ext]' : 'fonts/[hash:7].[ext]',
video: ({ isDev }) =>
isDev ? '[path][name].[ext]' : 'videos/[hash:7].[ext]'
},
// babel 相关配置
babel: {
presets ({ isServer }) {
const targets = isServer ? { node: '10' } : { browsers: '> 5%' }
return [
[require.resolve('@nuxt/babel-preset-app'), { targets }]
]
},
plugins: API_ENV === 'production' ? ['transform-remove-console'] : []
},
// 静态文件 地址配置
publicPath: projectPublicPath,
extend (config, ctx) {
const { isDev, isClient } = ctx
if (isDev && isClient) {
// 本地调试使用eslint
config.module.rules.push(
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: [/(node_modules)/, /(assets)/]
}
)
}
// 如果不是 开发模式切为客户端代码， npm run generate 时 静态文件上传阿里云oss
if (isClient && !isDev) {
config.plugins = config.plugins.concat([
new WebpackAliyunOss({
from: ['./.nuxt/dist/client/**'],
dist: distPath,
region: oss.region,
accessKeyId: oss.accessKeyId,
accessKeySecret: oss.accessKeySecret,
bucket: oss.bucket
})
])
}
},
// 设置 px2rem 需要结合 plugins 中js 根据页面视口宽度动态设置根节点字体大小
postcss: {
plugins: {
'postcss-pxtorem': {
replace: true,
rootValue: 37.5,
propList: ['*']
}
},
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 8']
}
}
}
}
oss.js 相关配置
module.exports = {
region: '***',
accessKeyId: '***',
accessKeySecret: '****************',
bucket: '******'
}
动态设置根节点字体大小js 和 禁止微信浏览器更改字体大小
/* eslint-disable no-undef */
// 设置 rem 函数
function setRem () {
const htmlWidth = document.body.clientWidth
// 得到html的Dom元素
const htmlDom = document.getElementsByTagName('html')[0]
const bodyDom = document.getElementsByTagName('body')[0]
// 设置根元素字体大小
htmlDom.style.fontSize = htmlWidth / 10 + 'px'
bodyDom.style.maxWidth = '750px'
bodyDom.style.visibility = 'visible' // 默认 body 为hidden 当计算完成font-size后再显示。解决页面重新计算时页面混乱的bug。
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
// 禁止微信浏览器更改字体大小
if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
handleFontSize()
} else if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', handleFontSize)
document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
}
function handleFontSize () {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 })
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function () {
WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 })
})
}
