We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
背景: 在<head>标签中，以inline的形式引入flexible.js文件。本项目主要为移动端项目，引入flexible.js 实现移动端适配问题。
<head>
flexible.js
Nuxt.js 通过 vue-meta 实现头部标签管理，通过查看文档发现，可以按照如下方式配置：
vue-meta
// nuxt.config.js head: { script: [ { innerHTML: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'} ] }
结果，生成 html:
<script data-n-head="true" type="text/javascript" charset="utf-8">console.log("hello")</script>
我们发现 vue-meta 把引号做了转义处理，加入 __dangerouslyDisableSanitizers: ['script'] 后，就不会再对这些字符做转义了，该字段使用需慎重！
__dangerouslyDisableSanitizers: ['script']
接下来，要把 console.log("hello") 的内容替换成 flexible.js，配置升级之后：
console.log("hello")
head: { script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'}], __dangerouslyDisableSanitizers: ['script'] }
踩坑成功，下一个坑...
背景：在组件中的<template>， <script> 或 <style> 上使用各种预处理器，加上处理器后，控制台报错。
<template>
<script>
<style>
<style lang="sass"> .red color: red </style>
这个问题解决方法非常简单，只需要安装这些依赖就好。
npm install --save-dev node-sass sass-loader
但是解决过程并不是很顺利的，在阅读中文文档时，忽略版本号，按照上面的提示进行操作，发现不能成功，后来各种debug，最后发现了该解决方案。后知后觉的发现了中文文档的版本号过低，如果需要查看文档，一定要看最新版本的英文文档！
背景：在css中，写入px，通过px2rem loader，将px转换成rem
px2rem loader
在以前的项目中，是通过 px2rem loader实现的，但是在Nuxt.js项目下，添加 css loader 还是很费力的，因为涉及到vue-loader。
vue-loader
想到了一个其他方案，可以使用 postcss 处理。可以在 nuxt.config.js 文件中添加配置，也可以在postcss.conf.js文件中添加。
postcss
nuxt.config.js
postcss.conf.js
build: { postcss: [ require('postcss-px2rem')({ remUnit: 75 // 转换基本单位 }) ] },
背景：给 utils 目录添加别名
刚刚说到，Nuxt.js内置了 webpack 配置，如果想要拓展配置，可以在 nuxt.config.js 文件中添加。同时也可以在该文件中，将配置信息打印出来。
webpack
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 应用初始化之前被加载导入。
module.exports = { plugins: ['~plugins/toast'] }
~plugins/toast.js 文件：
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。
NODE_ENV
// 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。
process.env.NODE_ENV
production
在 backpack 的源码中，找到了答案，在 执行 backpack build 命令时，会把 process.env.NODE_ENV 修改为 production，并且是写死的不可配置的......
backpack build
无奈下，只能在 process.env 下，添加 __ENV 属性，代表 NODE_ENV
process.env
__ENV
这时，在页面中打印出来的信息 process.env.__ENV undefined，但是可以打印出 process.env.NODE_ENV。
process.env.__ENV undefined
可以通过配置 nuxt.config.js 中的，env属性，解决该问题。
env
env: { __ENV: process.env.__ENV }
背景: 在引入第三方插件，或者直接在代码中写 window 时，控制台会给出警告，window 未定义。
window
发生在这个问题的原因时，node服务端并没有window 或 document 对象。解决方法，通过 process.browser 来区分环境。
document
process.browser
if (process.browser) { // 引入第三方插件 require('***') // 或者修改window对象下某一属性 window.mbk = {} }
本文主要在项目中遇到的各种问题，文中有任何表述不清或不当的地方，欢迎大家批评指正。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
构建问题
1. 如何在 head 里面引入js文件?
Nuxt.js 通过
vue-meta实现头部标签管理，通过查看文档发现，可以按照如下方式配置：结果，生成 html:
我们发现
vue-meta把引号做了转义处理，加入__dangerouslyDisableSanitizers: ['script']后，就不会再对这些字符做转义了，该字段使用需慎重！接下来，要把
console.log("hello")的内容替换成flexible.js，配置升级之后：踩坑成功，下一个坑...
2. 如何使用预处理器
这个问题解决方法非常简单，只需要安装这些依赖就好。
但是解决过程并不是很顺利的，在阅读中文文档时，忽略版本号，按照上面的提示进行操作，发现不能成功，后来各种debug，最后发现了该解决方案。后知后觉的发现了中文文档的版本号过低，如果需要查看文档，一定要看最新版本的英文文档！
3. 如何使用px2rem
在以前的项目中，是通过
px2rem loader实现的，但是在Nuxt.js项目下，添加 css loader 还是很费力的，因为涉及到vue-loader。想到了一个其他方案，可以使用
postcss处理。可以在nuxt.config.js文件中添加配置，也可以在postcss.conf.js文件中添加。4. 如何拓展 webpack 配置
刚刚说到，Nuxt.js内置了
webpack配置，如果想要拓展配置，可以在nuxt.config.js文件中添加。同时也可以在该文件中，将配置信息打印出来。5. 如何添加 vue plugin
可以在
nuxt.config.js中添加 plugins 配置，这样插件就会在 Nuxt.js 应用初始化之前被加载导入。~plugins/toast.js 文件：
6.如何修改环境变量 NODE_ENV
打印
process.env.NODE_ENV依旧是，production。在 backpack 的源码中，找到了答案，在 执行
backpack build命令时，会把process.env.NODE_ENV修改为production，并且是写死的不可配置的......无奈下，只能在
process.env下，添加__ENV属性，代表NODE_ENV这时，在页面中打印出来的信息
process.env.__ENV undefined，但是可以打印出process.env.NODE_ENV。可以通过配置
nuxt.config.js中的，env属性，解决该问题。开发问题
1. Window 或 Document 对象未定义？
发生在这个问题的原因时，node服务端并没有
window或document对象。解决方法，通过process.browser来区分环境。最后
本文主要在项目中遇到的各种问题，文中有任何表述不清或不当的地方，欢迎大家批评指正。
The text was updated successfully, but these errors were encountered: