我自己的网站 https://aijianli.site/ 是使用vue写的,为了能够让用户可以搜索到。对项目进行了 nuxt.js 重构。在重构过程中遇到了 N 多坑。一下记录了填坑经历
一、新建 nuxt 项目
查看官网
https://www.nuxtjs.cn/guide/installation
二、在 nuxt 项目中使用全局的 less
2.1 安装 less 和 less-loader
此处需要注意在 nuxt2 中使用的 less 和 less-loader 版本不能太高,高版本会直接报错。建议使用:
- "less": "^3.8.1"
- "less-loader": "^4.1.0"
npm install less@3.8.1 less-loader@4.1.0 --sava-dev
2.2 安装 @nuxtjs/style-resources
同样,过高的版本会直接报错,建议安装
- "@nuxtjs/style-resources": "^1.2.0"
在 nuxt.config.js 中配置 modules 和 styleResources。完成以下配置之后,在common-style中定义的样式变量就可以在任何地方使用了
{
modules: [
'@nuxtjs/style-resources'
],
styleResources: {
less: [
'./assets/css/common-style.less'
]
}
}
三、使用了浏览器特有的对象的js不使用ssr
如果部分 js 库或者自己写的 js 文件,需要在全局引入,但是其中包含了浏览器特有的对象时,nuxt会报错未定义导致项目启动不了。此时可以使用 plugins 配置 js 不使用 ssr, 例如:
{
plugins: [
'@/plugins/element-ui',
'@/plugins/global-regist-module',
// core 中使用到了window,使用ssr会直接报错,此组件不适用ssr
{ src: '@/plugins/core', ssr: false },
// vue-html2pdf 中使用到了window,使用ssr会直接报错,此组件不适用ssr
{ src: '@/plugins/vue-html2pdf', ssr: false }
]
}
四、路由
4.1 扩展路由配置
nuxt 使用了约定路由(详情找教程看),因此已有的 Vue2 项目如果已经处理好路由,就不用nuxt的路由,自己在路由扩展中去配置。
{
// 自动引入 component 中的模板,更加自身需要看是否需要配置
components: false,
router: {
// 这是一个函数,参数包含了约定路由routes,文件路径解析resolve
extendRoutes(routes, resolve) {
// __dirname 项目路径
routes.push({
name: "login",
path: "/login",
component: resolve(__dirname, "components/base/login.vue")
})
routes.push({
name: "admin",
path: "/admin",
component: resolve(__dirname, "components/admin/index.vue")
})
routes.push({
name: "customer",
path: "/customer",
component: resolve(__dirname, "components/customer/index.vue")
})
console.log(routes);
}
}
}
4.2 在 js 中去跳转路由
nuxt 还是使用了vue的路由,可以在js中去跳转路由
如下,就是在 vue 中跳转到 /admin
vue.$router.push("/admin");