Nuxt 踩坑记录

create on in resolved_bug with 0 comment and 406 view

Nuxt 踩坑记录。

样式

style 标签支持预处理器 scss

官方文档 - 预处理器

加载全局预处理器

  1. 更新 nuxt-sass-resources-loader
npm i --save-dev nuxt-sass-resources-loader
  1. 配置 nuxt.config.js
css: [ '~/assets/style/index.scss' ], ...... modules: [ ['nuxt-sass-resources-loader', ['~/assets/style/index.scss'] ] ],

JS

请求的端口问题

在 服务端渲染的过程中,向 API 服务发起请求时,需指明端口,默认为 80。若 API 服务未使用 80 端口,请求会报错。

NuxtServerError connect ECONNREFUSED 127.0.0.1:80

解决:
设置 axios baseUrl, 并修改端口 (axios.js)

import axios from 'axios' axios.defaults.baseURL = process.server ? `http://IP:API端口/api` : `/api`

添加代理 (nuxt.config.js)

proxy: { '/api': { target: 'IP:API端口', changeOrigin: true, }, }, modules: [ '@nuxtjs/proxy', ],

部署

部署文件

npm run build
    `|-.nginx
	 |-dist
           |-client
           |-server
     |-server
       |-index.js
     |-nuxt.config.js
     |-package.json      
npm install npm start

pm2 配置

{ "apps": [ { "name": "serve", "script": "production.js", "cwd": "./", "max_memory_restart": "1G", "autorestart": true, }, { "name": "ssr", "script": "npm -- start", "cwd": "./client_ssr", "max_memory_restart": "1G", "autorestart": true, } ] }
pm2 start pm2.json
😁😂😃😄😅😆😇😈😉😐😑😒😓😔😕😖😗😘😙😠😡😢😣😤😥😦😧😨😩😰😱😲😳😴😵😶😷😸😹🙀🙁🙂🙃🙄🙅🙆🙇🙈
🙂