• 当前标签:nuxt.js

程序开发 nuxt.js中ssr报 客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. 客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由于不正确的HTML标记导致的,例如在<p>中嵌套块级元素,或者缺少<tbody>。排水和执行全面客户端渲染。 这是使用element-ui没有在ssr中使用导致,在nuxt.config.js中配置: plugins: [{ src: '@/plugins/element-ui', ssr: true }], 就可以不报这错了 解决方案来自:https://www.cnblogs.com/chenyablog/p/10278427.html

2019-07-03 11:29:48 141 0 0
阅读详情

程序开发 Nuxt.js使用pm2服务端渲染应用部署nginx绑定域名

首先根据官方文档打包: nuxt build // 或者 npm run build 然后把 .nuxt, static, package.json, nuxt.config.js 这4个文件夹和文件上传至服务器 然后cd 到服务器的文件存放路径中,执行: npm i -production 配置nginx: upstream wwwserver { server 127.0.0.1:3000; #本地运行的端口 keepalive 2000; } server { listen 80; server_name www.domain.com; #外网访问的域名 client_max_body_size 1024M; location / { proxy_pass http://wwwserver/; proxy_set_header Host $host:$server_port; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } access_log /server/log/www.domain.com/access.log; error_log /server/log/www.domain.com/error.log; } 安装pm2 : npm i pm2 -g 执行启动pm2:pm2 start npm --name "你的项目名" -- run start pm2常用命令: 启动进程: pm2 start app.js pm2 start app.py pm2 start npm -- start pm2 start [app-name] pm2 start all 进程列表: pm2 list 重启进程: pm2 restart [app-name] pm2 restart all 停止进程: pm2 stop [app-name] pm2 stop all 进程日志: pm2 logs pm2 logs [app-name] 服务器上如何开机自动启动: 在服务器端,在项目都通过pm2启动成功之后,(可以通过命令pm2 ls进行查看)我们希望直接通过服务器重启之后能自动启动,可以通过pm2 save命令将当前的启动项保存起来,下次重启系统就可以自动启动了。 文章部分来自:向宗亮的小站

2019-06-28 09:05:40 351 0 0
阅读详情

程序开发 Nuxt中使用富文本编辑器vue-quill-editor + 图片上次quill-image-extend-module

首先在 nuxt.config.js 中配置: module.exports = {     // some nuxt config...     plugins: [       { src: '~plugins/nuxt-quill-plugin.js', ssr: false }     ],     // some nuxt config...     css: [       'quill/dist/quill.snow.css',       'quill/dist/quill.bubble.css',       'quill/dist/quill.core.css'     ],     // some nuxt config...   } 然后在 plugins 文件夹中新建 nuxt-quill-plugin.js 文件,写入一下内容: import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor/dist/ssr' Vue.use(VueQuillEditor) 然后在页面中调用: <template> <div>     <!-- 用 v-if 来确保在设定了 editorOption 后才渲染 v-quill -->   <div     v-if="editorOption"     class="quill-editor"     v-model="content"     @change="onEditorChange($event)"     @blur="onEditorBlur($event)"     @focus="onEditorFocus($event)"     @ready="onEditorReady($event)"     v-quill:myQuillEditor="editorOption">   </div> </div> </template> <script> import Vue from "vue"; export default {   beforeMount() {     const VueQuillEditor = require("vue-quill-editor/dist/ssr");     const Quill = require("quill");     const { container, ImageExtend, QuillWatch } = require("quill-image-extend-module");     Quill.register("modules/ImageExtend", ImageExtend);     Vue.use(VueQuillEditor);     this.editorOption = {         // some quill options         modules: {           ImageExtend: {             // 如果不作设置,即{}  则依然开启复制粘贴功能且以base64插入             name: "img", // 图片参数名             size: 3, // 可选参数 图片大小,单位为M,1M = 1024kb             action: "", // 服务器地址, 如果action为空,则采用base64插入图片             // response 为一个函数用来获取服务器返回的具体图片地址             // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}             // 则 return res.data.url             response: res => {               return res.info;             },             headers: xhr => {               // xhr.setRequestHeader('myHeader','myValue')             }, // 可选参数 设置请求头部             sizeError: () => {}, // 图片超过大小的回调             start: () => {}, // 可选参数 自定义开始上传触发事件             end: () => {}, // 可选参数 自定义上传结束触发的事件,无论成功或者失败             error: () => {}, // 可选参数 上传失败触发的事件             success: () => {}, // 可选参数  上传成功触发的事件             change: (xhr, formData) => {               // xhr.setRequestHeader('myHeader','myValue')               // formData.append('token', 'myToken')             } // 可选参数 每次选择图片触发,也可用来设置头部,但比headers多了一个参数,可设置formData           },           toolbar: {             // 如果不上传图片到服务器,此处不必配置             container: container, // container为工具栏,此次引入了全部工具栏,也可自行配置             handlers: {               image: function() {                 // 劫持原来的图片点击按钮事件                 QuillWatch.emit(this.quill.id);               }             }           }         }       }   },   data() {     return {       content: "",       editorOption: null     };   },   methods: {     onEditorBlur(editor) {       console.log("editor blur!", editor);     },     onEditorFocus(editor) {       console.log("editor focus!", editor);     },     onEditorReady(editor) {       console.log("editor ready!", editor);     },     onEditorChange({ editor, html, text }) {       console.log("editor change!", editor, html, text);       this.content = html;     }   } }; </script> 感谢 @amoshydra 提供帮助

2018-09-03 14:32:54 197 0 0
阅读详情
  • 1
前往