背景
考虑项目到后续会有SSR需求, 决定使用nuxt进行开发。因为使用的是vue2，nuxt使用的也是nuxt2。 每次弄个新项目新技术，总是会出现各种神奇问题，而且还是百度难度比较大的(╯﹏╰）。特此开贴记录
碰到问题
一、集成eslint aribnb
由于以前的项目都是用的airbnb的校验规则, 为了统一, 打算集成airbnb, 但是在这过程碰到了好多问题。由于nuxt官方没有提供eslint的规则选项，想要集成就得自己install。由于本人webpack基础薄弱，导致好多问题的发生。
寻找引入airbnb样例进行参考:
目前找过来最简单的版本: 案例
懒得看的,我截图重点给大家参考
安装 eslint-config-airbnb-base, 安装好之后在 .eslintrc.js 进行配置
二、使用vuex
没想到在这里还能折戟沉沙, 我也是服了我自己。根据API的一步步配置下来，竟然还是用不起来。
重点!! 目前nuxt2版本, 仅支持模块模式, 网上有教程说支持两种模式, 我也信了, 使用第二种new Vuex.store 去创建store, 然后报错了!
然后我又去翻了下官网上的配置，果然还是得看官网，从这里的得知 store 文件夹下面的 .js 文件, nuxt会自动编译成带命名空间的store文件(这里表达的可能不是很恰当), 举个例子
// 在vue中我们使用vuex, 文件结构
// - store
// --modules
// ---user.js
// - index.js
// ----- 在其他界面使用 user.js 的userid, nuxt 使用方式也是一样的
import { mapGetters } from 'vuex';
computed: {
// 这样引入后就能开始使用了
...mapGetters('user', ['userId']),
}
在nuxt中使用store, 因为nuxt已经集成了vuex, 不用再次安装
出现错误:
'vuex' should be listed in the project's dependencies. Run 'npm i -S vuex' to add it import/no-extraneous-dependencies
我一直以为我store那里写的有问题导致的, 结果.....
这个是eslint的报错, 因为nuxt内置了vuex, 所以package.json里面没有vuex的安装依赖, 导致eslint校验的时候提示这个, 最终结果方案就是我把这个规则给禁了。
三、渲染报错
报错信息: 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。
- 检查是否在内联元素中使用了任何块级元素
- 由于elementui的组件或者数据是异步渲染的, 所以需要再外层增加 ,
- 较为靠谱的查询结果
四、使用sass, scss
配置参考: dev.to/nbhankes/us…
- 每个页面引入scss配置
- 根据上述配置参考中安装 @nuxtjs/style-resources
- 配置nuxt.config.js 中的 build , 添加 loaders
loaders: {
scss: {
// scss公用文件
prependData: `
@import "~/styles/variable.scss";
`,
},
},
/*
sass-loader v8-, 选项名是'data'
sass-loader v8,选项名是'prependData'
sass-loader v10+,选项名是'additionalData'
*/
五、使用proxy
配置地址: www.nuxtjs.cn/faq/http-pr…
- 安装依赖 '@nuxtjs/proxy'
- 配置 nuxt.js
axios: {
proxy: true,
},
proxy: {
"/test/": {
target: "http://1.1.1.1:8888",
ws: true,
changeOrigin: true,
//路径重写
pathRewrite: {
"^/test/": "/"
}
},
},
六、单个页面引入js, css
在页面中加入 head(), API地址
七、性能优化
打包时文件大小优化 参考文章: ithelp.ithome.com.tw/articles/10…
