构建问题
1. 如何在 head 里面引入 js 文件?
背景: 在 <head> 标签中,以 inline 的形式引入 flexible.js 文件.本项目主要为移动端项目,引入 flexible.js 实现移动端适配问题.
Nuxt.js 通过 vue-meta 实现头部标签管理,通过查看文档发现,可以按照如下方式配置:
结果,生成 html:
// nuxt.config.js
head: {
script: [
{ innerhtml: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'
]
}
<script data-n-head="true" type="text/javascript" charset="utf-8">console.log("hello")</script>
我们发现 vue-meta 把引号做了转义处理,加入
__dangerouslyDisableSanitizers: ['script']
后,就不会再对这些字符做转义了,该字段使用需慎重!
接下来,要把
console.log("hello")
的内容替换成 flexible.js,配置升级之后:
踩坑成功,下一个坑...
head: {
script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'],
__dangerouslyDisableSanitizers: ['script']
}
2. 如何使用预处理器
背景:在组件中的 <template>, <script> 或 <style> 上使用各种预处理器,加上处理器后,控制台报错.
这个问题解决方法非常简单,只需要安装这些依赖就好.
<style lang="sass">
.red
color: red
</style>
npm install--save - dev node - sass sass - loader
但是解决过程并不是很顺利的,在阅读中文文档时,忽略版本号,按照上面的提示进行操作,发现不能成功,后来各种 debug,最后发现了该解决方案.后知后觉的发现了中文文档的版本号过低,如果需要查看文档,一定要看最新版本的英文文档!
3. 如何使用 px2rem
背景:在 CSS 中,写入 px,通过 px2rem loader,将 px 转换成 rem
在以前的项目中,是通过 px2rem loader 实现的,但是在 Nuxt.js 项目下,添加 css loader 还是很费力的,因为涉及到 vue-loader.
想到了一个其他方案,可以使用 postcss 处理.可以在 nuxt.config.js 文件中添加配置,也可以在 postcss.conf.js 文件中添加.
4. 如何拓展 webpack 配置
build: {
postcss: [
require('postcss-px2rem')({
remUnit: 75 // 转换基本单位
})
]
},
背景:给 utils 目录添加别名
刚刚说到,Nuxt.js 内置了 webpack 配置,如果想要拓展配置,可以在 nuxt.config.js 文件中添加.同时也可以在该文件中,将配置信息打印出来.
5. 如何添加 vue plugin
extend (config, ctx) {
console.log('webpack config:', config)
if (ctx.isClient) {
// 添加 alias 配置
Object.assign(config.resolve.alias, {
'utils': path.resolve(__dirname, 'utils')
})
}
}
背景:自己封装了一个 toast vue plugin,由于 vue 实例化的过程没有暴露出来,不知道在哪个时机注入进去.
可以在 nuxt.config.js 中添加 plugins 配置,这样插件就会在 Nuxt.js 应用初始化之前被加载导入.
~plugins/toast.js 文件:
module.exports = {
plugins: ['~plugins/toast']
}
6. 如何修改环境变量 NODE_ENV
import Vue from 'vue'
import toast from '../utils/toast'
import '../assets/css/toast.css'
Vue.use(toast)
背景:在项目中,设置 3 个 NODE_ENV 的值,来对应不同的版本.development,本地开发;release,预发布版本;production,线上版本.其中,预发布版本比 production 版本,多出 vconsole.
打印
// package.json
"scripts": {
"buildDev": "cross-env NODE_ENV=release nuxt build && backpack build",
"startDev": "cross-env NODE_ENV=release PORT=3000 node build/main.js"
},
process.env.NODE_ENV
依旧是,production.
在 backpack 的源码中,找到了答案,在 执行 backpack build 命令时,会把
process.env.NODE_ENV
修改为 production,并且是写死的不可配置的......
无奈下,只能在 process.env 下,添加 __ENV 属性,代表 NODE_ENV
这时,在页面中打印出来的信息
process.env.__ENV undefined
,但是可以打印出
可以通过配置 nuxt.config.js 中的,env 属性,解决该问题.
process.env.NODE_ENV
.
开发问题
env: {
__ENV: process.env.__ENV
}
1. Window 或 Document 对象未定义?
背景: 在引入第三方插件,或者直接在代码中写 window 时,控制台会给出警告,window 未定义.
发生在这个问题的原因时,node 服务端并没有 window 或 document 对象.解决方法,通过 process.browser 来区分环境.
最后
if (process.browser) {
// 引入第三方插件
require('***')
// 或者修改window对象下某一属性
window.mbk = {}
}
本文主要在项目中遇到的各种问题,文中有任何表述不清或不当的地方,欢迎大家批评指正.给大家推荐我们的公众号 前端新视野 ,一个很认真的日刊公众号,欢迎扫描下方二维码关注!
来源: https://segmentfault.com/a/1190000012806871