最近因工作需要，使用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 })

})

}