Vue2 项目使用 nuxt.js 重构 - 一、基本用法及部分依赖注意事项

　　个人网站：https://aijianli.site/ 可以免费在线制作简历，提供PDF下载，方便快捷。

　　我自己的网站  爱简历 是使用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");