vue项目接入nuxt,nuxt使用sentry

最新推荐文章于 2024-05-11 10:40:21 发布

九分库

最新推荐文章于 2024-05-11 10:40:21 发布

阅读量2.5k

点赞数 1

分类专栏：功能文章标签： vue.js sentry javascript

本文链接：https://blog.csdn.net/qq_52912134/article/details/127516552

版权

功能专栏收录该内容

48 篇文章 0 订阅

订阅专栏

Vue项目改造nuxt

1.安装nuxt

如果 vue-cli 没有安装, 需先通过 npm install -g vue-cli 来安装

 npm install --save nuxt

2.在你想要的目录下创建nuxt项目

npx create-nuxt-app  <项目名>

创建会有一些选择，可以根据自己项目需要进行选择，因为我的项目用到了elementUi,axios,eslint，所有选了这些，其他2项都默认，这样会自动安装我选好的依赖，如果没选后期自己下依赖也可以

选完后就创建好了一个nuxt项目，目录结构是这样的

├── assets // 资源文件。用于组织未编译的静态资源入LESS、SASS 或 JavaScript

│ └── logo.jpg // 默认logo图片

├── components // 组件。用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件

│ └── AppLogo.vue // 默认logo组件

├── layouts // 布局。页面都需要有一个布局，默认为 default。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的标签中。

│ └── default.vue // 默认模板页面，类似mvc中的layout

├── middleware // 中间件。存放中间件。可以在页面中调用： middleware: ‘middlewareName’ 。

├── pages 　 // 页面。一个 vue 文件即为一个页面。

│ └── index.vue // 默认首页面

├── plugins // 用于存放JavaScript插件的地方

│ └── element-ui.js // 上边我们安装的UI框架

├── static // 用于存放静态资源文件，比如图片，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

├── store 　 // 用于组织应用的Vuex 状态管理。

├── .editorconfig // 开发工具格式配置

├── .eslintrc.js // ESLint的配置文件，用于检查代码格式

├── .gitignore // 配置git不上传的文件

├── nuxt.config.js // 用于组织Nuxt.js应用的个性化配置，比如网站title，已便覆盖默认配置

├── package.json // npm包管理配置文件

└── README.md // 说明文档

这时候可以用npm run dev 启动了，没有router文件，nuxt不需要自己配置路由文件，pages中的文件名就是你的路由，执行完npm run dev会发现目录会多一个.nuxt 文件，

这是程序启动自动生成的，里面会有一个router.js,就是自动生成的路由，目录结构是这样的

在这里插入图片描述

3、开始改造

3-1 移动src

把我们原vue项目下的src,直接拷贝到现在的nuxt根目录下（src和pages一级），把根目录下的components,layouts,page,store全部删掉（为了方便区分，不删也可以），

在nuxt.config.js配置 srcDir:‘src/’ 重定向默认目录,这样就把以前默认根目录改成src目录，src/pages里面存放的是所有的vue文件，index.vue是默认展示页

在这里插入图片描述

把plugins放到我们src目录下（因为plugins要存放js插件），把我们src下的views改为pages

3-2 配置layouts

把原vue项目的app.vue中的代码拷贝放到layout/mian.vue中（布局目录 layouts 用于组织应用的布局组件，在页面中使用layout: ‘mian’，相关链接）

在这里插入图片描述

3-3 配置plugins

原vue项目的main.js放到plugins下，然后在nuxt.config.js中引入，这是我用到的所有的js插件，如果你还有其他引用也要放到这里引入

在这里插入图片描述

3-4 全局css

如果原项目mian.js里面有引入css文件一定要提出来，把全局引入的css都统一放到src/style目录下，然后在nuxt.config.js中引入

在这里插入图片描述

3-5 配置环境

配置生产模式和开发模式请求不同地址

在根目录创建env.js 内容

module.exports = {
  SENTRY_DSN:'*****',
  RELEASE_VERSION:'****@1.0',
  SENTRY_DEV:false,
  dev: {
    MODE: 'development',
    ENV_API: '******',   //测试服务器地址
    BASE_URL:'******'
  },
  pro: {
    MODE: 'production',
    ENV_API: '****',  // 正式服务器地址
    BASE_URL:'****'
  }
}

在nuxt.config.js 中引入env.js 然后配置env

const env = require('./env’)
module.exports = {
  env: {
    BASE_URL: env[process.env.MODE].BASE_URL,
    NODE_ENV: env[process.env.MODE].MODE,
    SENTRY_DSN: env.SENTRY_DSN,
    SENTRY_DEV: env.SENTRY_DEV,
    RELEASE_VERSION:env.RELEASE_VERSION
   }
}

这样配置完就axios请求生产和开发地址就配置好了，这个时候通过npm run dev 就可以看到你的项目了（如果你原vue 项目的路由和文件名不同名的时候就要修改一下有跳转路由的地方就可以）

3-6 使用svg

如果项目用引入svg文件的还需要在nuxt.config.js中配置

npm install nuxt-svg-sprite-loader

在nuxt.config.js中配置

  modules: [
    '@nuxtjs/axios',
    ['nuxt-svg-sprite-loader', {
      symbolId: 'icon-[name]'
    }],
  ],

这个时候项目便可以正常运行起来了，你会发现跟我们原来vue项目还是差不都，打包的时候并没有把动态数据静态化

这个时候就需要asyncData做服务端提前渲染（https://www.nuxtjs.cn/guide/async-data）

3-7 asyncData渲染组件

asyncData渲染组件（仅限于pages下的页面，components下的组件不可以用）之前异步获取数据

asyncData 方法是在组件初始化之前调用的，所以this关键字不能用，

我这里的getBanners是提前引入的接口请求，然后拿到的值通过return 返回，return返回的变量都要和页面要用的变量名（data定义过）一致，这样就可以在页面加之前把动态数据拿过来，并进行渲染了，这时候右键查看源码就可以看到动态数据了

3-8 components组件提前加载数据

components组件想提前加载数据可以用vueX

比如菜单这样的组件是需要提前加载数据利于网页爬虫去爬这些链接，asyncData又不能在这里用，这个时候就可以用vuex了

你的请求要写在actions 中的nuxtServerInit里，这里可以参考https://zh.nuxtjs.org/guide/vuex-store，写的很详细就不多阐述了

不需要安装vuex,因为nuxtjs已经提供了

import { getMenus } from '@/api'
export const state=()=>({
    menus: []
})
export const mutations= {
    setMeuns (state, value) {
        state.menus = value
    }
}
export const actions= {
    async nuxtServerInit({ commit}, { req }) {   
        const getMenusres = await getMenus()
        let tempMenus = [],menus = getMenusres.data.data.items;
        menus.forEach(item => {
        if (!item.parentid) {
            tempMenus.push(item)
        }
    })
    commit("setMeuns", tempMenus);
}

vue页面使用直接写在computed里即可

computed:{
    menus(){
        console.log(this.$store.state.menus)
        return this.$store.state.menus
    }
},

3-9 部署发布

如果是多环境打包的话要在package.json中配置一下，打包时候可以npm run build

安装cross-env

npm install cross-env

在需要的脚本之前加入 cross-env NODE_ENV=dev ，表示执行该脚本时，添加env环境变量NODE_ENV（变量名），dev(值) 。

package.json的scripts修改后如下：

 "scripts": {
    "dev": "cross-env MODE=dev nuxt",
    "build": "cross-env MODE=pro nuxt build",
    "start": "cross-env MODE=pro nuxt start",
    "generate": "cross-env MODE=pro nuxt generate"
  },

Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署和静态应用部署（可以参考https://zh.nuxtjs.org/guide/commands）

3-10 配置meta标签

在nuxt.config.js中配置titile 和meta

 head: {
    title: '******',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon',  href: '/citec.ico' }
    ],
    script:[
      {
        src: '&&&&&&'
      }
    ],
  },

这样基本配置就改造完毕

Nuxt使用sentry

1.安装

npm install --save @sentry/vue @sentry/tracing

2.初始化

2-1 创建 sentry.js

创建 src/plugins/sentry.js 并填写以下内容

import Vue from 'vue'
import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";
process.env.NODE_ENV ==='production' && Sentry.init({
  Vue,
  dsn: process.env.SENTRY_DSN, // 如果传空或不传则不会上报任何 Sentry 错误
  logErrors:process.env.SENTRY_DEV, //是否需要在控制台打印错误
  integrations: [
    new BrowserTracing({
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
  release: process.env.RELEASE_VERSION
})

export default (_, inject) => {
  inject('sentry', Sentry)
}

注意，logErrors选项默认就是false，这代表sentry会阻止一切异常打印到控制台。如果你是开发环境需要调试的话，就把logErrors暂时设置为true并把上面的process.env.NODE_ENV === “production” &&暂时注释掉。或者自己写个逻辑判断一下均可。

2-2 配置环境变量

在根目录上创建名为env.js的文件，写入如下内容

module.exports = {
  SENTRY_DSN:'*****',
  RELEASE_VERSION:'*****@1.0',
  SENTRY_DEV:false,
  dev: {
    MODE: 'development',
    ENV_API: '',   //测试服务器地址
    BASE_URL:'i'
  },
  pro: {
    MODE: 'production',
    ENV_API: '',  // 正式服务器地址
    BASE_URL:''
  }
}

2-3 配置 nuxt.config.js

const env = require('./env')
export default  {
  env: {
  	//每个项目都有自己的dsn，日志会发往此地址
  	SENTRY_DSN: env.SENTRY_DSN,
  },
  plugins: [
  	'@/plugins/sentry',
  ]
}

3. 使用

现在就可以试试看了。比如在某个方法里给一个未定义的变量赋值，然后页面上放个按钮点击调用这个方法。注意，如果你执行npm run dev运行项目的话，要把第2步里面的process.env.NODE_ENV === "production" &&注释掉。

Sentry上传sourceMap

1. 安装

npm install @sentry/webpack-plugin

2.创建.sentryclirc文件

在根目录上创建.sentryclirc文件内容为

[defaults]
url=url
org=sentry
project=project

[auth]
token=token

3. 修改 webpack 配置

打开根目录下的nuxt.config.js文件，输入如下内容

const glob = require('glob')
const { removeSync } = require('fs-extra')
const SentryWebpackPlugin = require('@sentry/webpack-plugin')
const env = require('./env')
 build: {
    transpile: [/^element-ui/],
    extend(config, ctx) {
      /** 引入打包时自动上传sourcemap的插件 */
      const { isDev, isClient } = ctx
      if ((!isDev || env.SENTRY_DEV) && isClient) {
        if (isClient) config.devtool = 'hidden-source-map'
        const path = config.output.publicPath
        config.plugins.push(
          new SentryWebpackPlugin({
            include: ['.nuxt/dist/client'],
            ignore: ['node_modules', '.nuxt/dist/client/fonts','.nuxt/dist/server'],
            urlPrefix: path.startsWith('/') ? `~${path}` : path,
            release: env.RELEASE_VERSION,
            configFile: './.sentryclirc'   // 指定sentry上传配置
          }),
          // 构建完后删除 source map 文件的简易插件
          {
            apply: (compiler) => {
              compiler.hooks.done.tap('CleanJsMapPlugin', () => {
                glob
                  .sync('.nuxt/dist/**/*.js.map')
                  .forEach((f) => removeSync(f))
              })
            },
          },
        )
      }
    }
  }