Nuxt.js初上手(含axios封装、百度统计代码、Nginx配置文件等步骤)

Thu, 23 Feb 2023 15:56:35 +0800

因新项目对SEO有需求，而自己也对Vue语法较为熟悉，早就在官网上看到过Nuxt.JS的简介不过一直也没有时间来折腾下。这次项目从本地运行到部署花了2天，其中有一部分坑也是摸索着才想出来，故此记录一下流程。

本篇文章的Axios封装部分借鉴了博客 Nuxt中Axios的封装及接口统一管理方案，虽然可以再分开将不同类型的Api分散在各个文件后通过 require.context() 去实现自动导入，不过鉴于本项目规模有限就不再往这部分折腾，有兴趣的小伙伴也可以参照另一篇博客 (https://blog.csdn.net/weixin_41852038/article/details/122115948，不过据评论反馈无法直接运行，请甄别后使用) 来实现。

1.本地开发环境搭建

可能由于Nuxt3出来，Nuxt2项目当我用NodeJS 的V18版本运行项目时提示失败，切换到Node v16.19.1版本后正常运行。考虑到这类多版本Node共存的需求，本地主机上装个Node版本管理工具还是很有必要的。这里我就直接用朋友推荐的 Volta来实现，Volta的使用还算简单，有时间可以另外开一篇来讲。总之，该项目Node版本固定后暂时调用官方的脚手架创建方法来进行。

# 使用create-nuxt-app 来创建项目，提示没有该命令的可以先试用npm i -g create-nuxt-app 安装项目启动包的启动包
npm init nuxt-app foo-bar
# 随后是选项的方式，按需选择，我的选择如下
programming language- js
package manager - npm
ui framework - vuetify # 或者Elementui也可
template engine - html
nuxt.js modules - axios
linting tools - prettier
testing framework - none
rendering mode server(nodejs hosting)
deployment tools jsconfig.json
CI none
version control system - git

等待包安装完，用IDE进入项目开始编辑

2.Axios封装

由于项目创建时已集成Axios，故此处基本不再需要在Nuxt配置文件中额外配置Axios。基本步骤如下

1. 项目根文件夹创立api文件夹，用于存放请求的接口 -- @/api/index.js

 
 export default ($axios) => {
   return {
     getData: () => $axios.get('/get_index_data'),
     // 有参数的情况
     postData: data => $axios.post('/get_index_data', data),
     getData: params => $axios.get('/get_index_data', {params}),
     // ...your other api function
     // 如按条件获取课程
     getCourseList: data => $axios.post('/service/courseFront/getCourseList', data),
   }
 }

2. plugins文件夹创建request.js封装api请求

 // 引入创建的index.js api文件
 import req from '@/api/index.js'
 
 export default function ({ $axios, store }, inject) {
   function axiosConfig($axios) {
     let requestConfig = {}
     // 设置API的域名，注意生产环境已用nginx对/api进行proxy
     const baseUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:3000/api' : `http://xxx.com/api`
     $axios.setBaseURL(baseUrl)
     // 设置请求拦截
     $axios.onRequest((config) => {
       // 用于调试
       if (process.env.DEBUG) {
         console.log('$axios.onRequest', config)
       }
       requestConfig = {
         baseURL: config.baseURL,
         url: config.url,
         method: config.method,
         data: config.data,
         headers: config.headers,
         params: config.params,
       }
 
       config.startTime = new Date().getTime()
       config.headers['Content-Type'] = 'application/json'
       /* 如果需要token */
       const token = store.state.token || ''
       if (token) {
         // config.headers.Authorization = `Bearer ${token}`
         config.headers.token = `${token}`
       }
       return config
     })
     // 设置响应拦截
     $axios.onResponse((response) => {
       response.config.endTime = new Date().getTime()
       const status = response.status
 
       if (+status === 200) {
         // 打印出每个接口的响应时间，如果慢了就捶后端，让他优化！！！
         console.info(response.config.url, '请求时间', response.config.endTime - response.config.startTime + 'ms'
         )
         // 用于调试
         if (process.env.DEBUG) {
           console.info('$axios.onResponse', response.data)
         }
         // 返回接口数据
         return response.data
       } else {
         // 如果请求失败的，打印出相应的错误信息，更好的修改。
         const responseConfig = response ? response.config : {}
         console.error('响应拦截报错提示： ', {
           url: responseConfig.baseURL + responseConfig.url,
           status: response.status,
           statusText: response.statusText,
           method: responseConfig.method,
           headers: responseConfig.headers,
           data: responseConfig.data,
           params: responseConfig.params,
           responseData: response.data,
         })
       }
     })
 
     // axios错误处理
     $axios.onError((error) => {
       const response = error.response || {}
       const responseConfig = response.config || {}
       console.error('$axios.onError: ', error)
       console.error('错误处理提示 ', {
         url: responseConfig.baseURL + responseConfig.url,
         status: response.status,
         statusText: response.statusText,
         method: responseConfig.method,
         headers: responseConfig.headers,
         data: responseConfig.data,
         params: responseConfig.params,
         responseData: response.data,
         ...requestConfig,
       })
     })
     // 最后返回$axios对象
     return $axios
   }
   inject('req', req(axiosConfig($axios.create())))
 }

3. 在 nuxt.config.js引入request.js文件

 export default {
  ... // other code
   plugins: [
     '~/plugins/request',
   ],
   // 配合上述/api实现本地开发时使用代理
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
     // https://go.nuxtjs.dev/axios
     '@nuxtjs/axios',
     '@nuxtjs/proxy',
   ],
 
   // Axios module configuration: https://go.nuxtjs.dev/config-axios
   axios: {
     // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
     // baseURL: '/api', // 此处不备注掉会出现请求前实际出现2个/api，因已调用axios的封装此处不再设置baseURL
     proxy: true,
   },
   proxy: {
     '/api': {
       target: 'http://xx.cn/api',
       pathRewrite: { '^/api': '', },
       changeOrigin: true,
     }
   },
     ... // other code
 }

4. 使用

asyncData

 async asyncData({ $indexApi }) {
     const res = await $indexApi.getData()
     
     let data = []
     
     if(res.status) {
         data = res.data
     }
     
     return {
         data
     }
 },

store

 export const actions = {
   async getData({ commit }) {
     const res = await this.$indexApi.getData()
 
     if (res.state) {
       commit('SET_INDEX_DATA', res.data)
     } else {
       throw new Error(res)
     }
   }
  }

method

 export default {
  methods: {
         async getData() {
             await this.$indexApi.getData()
             // code something
         }
     }  
 }

以上步骤启动后，再在项目中运行基本可以了。悲催的是我在配置Axios的BaseUrl那里沿用了Vue/CLI项目的习惯，开发环境下设的BaseURL是 '/api'，结果asyncData中调用这个方法就是不成功(报错 connect ECONNREFUSED ::1:80)，而在mounted周期内是客户端调用该方法就没问题，网上直接搜这个问题没答案，但有位仁兄的想法是这个请求地址是直接使用 /api/*** 进行访问的，默认是向本机80端口发送请求，而我本地80端口没跑服务自然报错，后来反复测试把生产环境下的BaseURL设为了项目启动的地址 http://localhost:3000/ 再去请求果然就可以了；生产环境中由于提前用Nginx进行了代理，因此生产环境中是正常的。

3.百度统计

点击跳转百度统计，这个用来统计网站访问情况等等的还是很好用的

1. 项目根目录的plugin文件夹内添加baidu.js

 export default ({app: {router}, store}) => {
   /* 每次路由变更时进行pv统计 */
   router.afterEach((to, from) => {
     /* 告诉增加一个PV */
     try {
       window._hmt = window._hmt || []
       window._hmt.push(['_trackPageview', to.fullPath])
     } catch (e) {
     }
   })
 }

2. nuxt.config.js中添加以下配置

export default {
   head:{
     script: [
       // xxxx是百度统计分配的代码
       { src: 'https://hm.baidu.com/hm.js?xxxxxxxxx' },
     ],
   },
   plugins:['@/plugins/baidu']
 }

4.服务器部署

1. 服务器安装node

此处使用CentOS7.9 进行安装，进入想要安装的目录(此处为 /usr/local/node-v16.19.1)依次运行下列程序

    wget https://nodejs.org/dist/v16.19.1/node-v16.19.1-linux-x64.tar.xz
     
   # 解压
   xz -d node-v16.19.1-linux-x64.tar.xz
   tar -xvf node-v16.19.1-linux-x64.tar
   # 进入目录
   cd node-v16.19.1-linux-x64/
     
   # 创建软连接
   ln -sf /usr/local/node-v16.19.1-linux-x64/bin/node /usr/local/bin/node
   ln -sf /usr/local/node-v16.19.1-linux-x64/bin/npm /usr/local/bin/npm
     
   # 测试
   node -v
   npm -v

2.安装pm2并软连接

命令find / -name pm2找到pm2安装目录(使用bin文件夹下的)，按上述node安装位置是在/usr/local/node-v16.19.1-linux-x64/bin/pm2，建立软连接ln -s /usr/local/node-v16.19.1-linux-x64/bin/pm2 /usr/local/bin，为避免日志问题可安装pm2插件进行日志分割pm2 install pm2-logrotate

3. 项目打包

项目打包 npm run build，随后将.nuxt目录、static目录、nuxt.config.js、package.json复制进项目在服务器上的文件夹/usr/share/nginx/html/nuxt.xx.cn/，执行npm i安装依赖

4. 项目运行

修改该站点nginx配置文件(主要是配置反代)/etc/nginx/conf.d/nuxt.xx.cn.conf文件，同项目中的该文件，项目使用pm2启动，过程为进入项目根目录/usr/share/nginx/html/nuxt.xxx.cn/，按照官网在此处添加pm2启动文件ecosystem.config.js，随后在此处运行pm2 start即可启动项目，项目日志可通过网站app.pm2.io在线获取

ecosystem.config.js

 // ecosystem.config.js
 module.exports = {
   apps: [
     {
       name: 'vue_nuxt',
       exec_mode: 'cluster',
       instances: 'max', // Or a number of instances
       script: './node_modules/nuxt/bin/nuxt.js',
       args: 'start'
     }
   ]
 }

Nginx配置文件

upstream nodenuxt {
   server 127.0.0.1:3000; #nuxt项目 监听端口
   keepalive 64;
 }
 
 server
 {
     listen       80;
     listen       [::]:80;
     server_name  nuxt.xxx.cn;
     index index.php index.html index.htm default.php default.htm default.html;
     root /usr/share/nginx/html/nuxt.xxx.cn/.nuxt/dist;
 
     gzip on;
     gzip_min_length 1k;
     gzip_comp_level 5;
     gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
     gzip_disable "MSIE [1-6]\.";
     gzip_vary on;
 
 
     location / {
         # root /usr/share/nginx/html/nuxt.xx.cn/.nuxt/dist/;
         # try_files $uri $uri/ /index.html; #https://v3.router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
         # index  index.html index.htm;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
         proxy_set_header Host $host;
         proxy_set_header X-Nginx-Proxy true;
         proxy_cache_bypass $http_upgrade;
         proxy_pass http://nodenuxt;
     }
 
     # 代理解决跨域
     location /api/ {
         proxy_pass http://xx.cn:8100/;
         proxy_redirect default;
     }
 
 
     # Load configuration files for the default server block.
     include /etc/nginx/default.d/*.conf;
 
     error_page 404 /404.html;
     location = /404.html {
     }
 
     error_page 500 502 503 504 /50x.html;
     location = /50x.html {
     }
 }

以上，一个基础的Nuxt框架就搭好了，其他Nuxt开发注意事项可以访问Nuxt官方文档。若有什么问题欢迎各位留言，我看到将会尽力解答。

——一个初级前端

新起点

Wed, 08 Feb 2023 13:21:51 +0800

不知何时起，没有发朋友圈的欲望，没有玩新游戏的欲望，也没有换新电子设备的欲望。但我却觉得，总得留下点什么，不为他人观摩也为自己品鉴。恰巧看到z-blog建的站，也就在此处创建一个私域空间尝试记录吧。

活着

Nuxt.js初上手(含axios封装、百度统计代码、Nginx配置文件等步骤)

1.本地开发环境搭建

2.Axios封装

3.百度统计

4.服务器部署

新起点