菜单

Nuxt.js踩坑计算分享

2019年6月1日 - JavaScript

图片 1

nuxt部署

最终,我们使用pm2来配置nuxt。

pm2 start npm --name nuxt -- start

踩坑成功,下3个坑…

踩过的坑

布局格局很简短对不对,看完文书档案后自个儿就在谐和买的服务器上尝试陈设一下,然后,BOOM!!!

老是在服务器上试行nuxt build,总是有如下报错,并且jenkins会随之挂掉。

error Command failed with signal "SIGKILL".

看了弹指间服务器监察和控制发掘build的时候cpu和内部存款和储蓄器飙升,尤其是内部存储器。。。

可以吗,作者买的是Ali最低配的ECS,进级配置是终极的选料,在那在此以前只可以另辟蹊径。

背景:自身包装了二个 toast vue plugin,由于 vue
实例化的进度未有暴暴光来,不明了在哪些时机注入进来。

原来的书文地址:lewis一九八6@amoy

复制代码 代码如下:

合法推荐配置方式

至于服务端渲染应用陈设,官方文书档案是这么写的:

安排 Nuxt.js 服务端渲染的运用不能够平素利用 nuxt
命令,而应超越进行编译营造,然后再开发银行 Nuxt
服务,可因而以下五个指令来完毕:

nuxt buildnuxt start

推荐的 package.json 配置如下:

{ "name": "my-app", "dependencies": { "nuxt": "latest" }, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start" }}

提示: 建议将 .nuxt 加入 .npmignore 和 .gitignore 文件中。

乐趣是说.nuxt不到场到版本调控,每一遍服务器从gitlab上拉代码后先举办nuxt build生成.nuxt文件夹,然后再施行nuxt start来运营服务。

打印 process.env.NODE_ENV 依旧是,production。

静态应用陈设就不说了,首要说说服务端渲染应用计划。

您大概感兴趣的稿子:

Nuxt.js 提供了二种发表安顿应用的措施:服务端渲染应用铺排 和
静态应用安顿。

<script data-n-head=”true” type=”text/javascript”
charset=”utf-8″>console.log(“hello”)</script>

另辟蹊径

既是服务器上build不停,那我们就地点build再上传,在.gitignore里把.nuxt去掉、并把dist改为/dist,然后本地推行yarn build,成功之后再上传到github上,检查一下.nuxt是或不是有上传上去。

此后在服务器上把代码拉下来、安装一下凭仗,推行nuxt start就足以了。

那边还也可以有个坑,正是干吗要把.gitignore里的dist改为/dist

/dist以此文件夹是推行nuxt generate年轻成的,用来做静态应用铺排的,那有个别就跟平时意况下的.nuxt一样是不应有投入到版本调整里的,但由于nuxt build之后,在.nuxt里也会生成五个dist文本夹,大家盼望gitignore的唯有/dist而不是/.nuxt/dist,因而猜需求做出这里的修改。

付出难题

不足为奇说起,Nuxt.js内置了 webpack 配置,如若想要拓展配置,能够在
nuxt.config.js 文件中加上。同一时候也足以在该公文中,将安排消息打字与印刷出来。

然则化解进程并不是很顺利的,在阅读汉语文书档案时,忽略版本号,遵照地方的升迁进行操作,发掘无法学有所成,后来各样debug,最后开掘了该解决方案。后知后觉的觉察了华语文书档案的版本号过低,要是需求查阅文书档案,不可不看最新版本的英文文书档案!

一. 什么样在 head 里面引进js文件?

head: {
 script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'}],
 __dangerouslyDisableSanitizers: ['script']
}

在此前的连串中,是透过 px贰rem loader贯彻的,但是在Nuxt.js项目下,添加css loader 依旧很辛勤的,因为涉嫌到vue-loader。

背景:在组件中的<template>, <script> 或 <style>
上选取各类预管理器,加上管理器后,调控台报错。

~plugins/toast.js 文件:

// nuxt.config.js
head: {
 script: [
  { innerHTML: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'}
 ]
}
import Vue from 'vue'
import toast from '../utils/toast'
import '../assets/css/toast.css'

Vue.use(toast)

背景:
在<head>标签中,以inline的方式引入flexible.js文件。本项目根本为运动端项目,引进flexible.js
完毕移动端适配难题。
Nuxt.js 通过 vue-meta
完成底部标签管理,通过查阅文书档案发掘,能够依据如下形式配置:

背景:在css中,写入px,通过px2rem loader,将px转换成rem

咱俩开采 vue-meta 把引号做了转义处理,参与
__dangerouslyDisableSanitizers: [‘script’]
后,就不会再对那么些字符做转义了,该字段使用需慎重!

以此标题一举成功措施特别简单,只要求设置那么些重视就好。

1. Window 或 Document 对象未定义?

无奈下,只能在 process.env 下,添加 __ENV 属性,代表 NODE_ENV

营造难点

贰. 什么采用预管理器

那时候,在页面中打字与印刷出来的音信 process.env.__ENV
undefined,不过能够打字与印刷出 process.env.NODE_ENV。

背景: 在引入第二方插件,或许直接在代码中写 window
时,调控台会给出警告,window 未定义。
发生在那一个主题素材的由来时,node服务端并不曾window 或 document
对象。化解格局,通过 process.browser 来分别情形。

陆.什么样修改境况变量 NODE_ENV

四. 怎么举办 webpack 配置

能够在 nuxt.config.js 中加多 plugins 配置,这样插件就能够在 Nuxt.js
应用起初化此前被加载导入。

能够由此配备 nuxt.config.js 中的,env属性,化解该难点。

伍. 如何加多 vue plugin

<style lang="sass">
.red
 color: red
</style>
extend (config, ctx) {
 console.log('webpack config:', config)
 if (ctx.isClient) {
  // 添加 alias 配置
  Object.assign(config.resolve.alias, {
   'utils': path.resolve(__dirname, 'utils')
  })
 }
}

接下去,要把 console.log(“hello”) 的剧情替换成flexible.js,配置升高之后:

if (process.browser) {
 // 引入第三方插件
 require('***')
 // 或者修改window对象下某一属性
 window.mbk = {}
}
npm install --save-dev node-sass sass-loader
env: {
 __ENV: process.env.__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"
 },

想到了1个此外方案,能够行使 postcss 管理。能够在 nuxt.config.js
文件中加上配置,也得以在postcss.conf.js文件中加多。

背景:在品种中,设置 二个 NODE_ENV
的值,来对应分歧的版本。development,本地开荒;release,预揭橥版本;production,线上版本。个中,预发表版本比production版本,多出vconsole。

build: {
 postcss: [
  require('postcss-px2rem')({
   remUnit: 75 // 转换基本单位
  })
 ]
},

背景:给 utils 目录增加外号

最后

在 backpack 的源码中,找到了答案,在 施行 backpack build 命令时,会把
process.env.NODE_ENV 修改为 production,并且是写死的不行配置的……

module.exports = {
 plugins: ['~plugins/toast']
}

结果,生成 html:

三. 什么样行使px二rem

本文首要在类型中碰着的各类难点,文中有其余表述不清或不当的地点,欢迎我们讨论指正。希望对大家的学习抱有扶助,也期望大家多多匡助脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图