技術背景

原網站採用ajax+dom操作渲染的方式實現的前端頁面。隨著業務推廣，導步資料載入的模式不符合seo的收錄標準，經過技術選型和開發人員的調配，最終選擇vue的Nuxtjs進行開發。

Nuxt搭建根據官方文件搭建專案，安裝所需擴充套件。採用cnpm安裝速度較快。遇到問題：同步渲染部分請求多次介面速度較慢，所以採用的是同步介面用內網地址，非同步介面用的網路地址，具體見下方配置。

//所有的訪問url前面加 /local/ 和 /api/ 來區分路由到具體地址。//nuxt.config.js axios: { proxy: true, prefix: '', credentials: true }, proxy: { //同步地址 '/local/': {  target:'http://localhost:7000/',//內網地址 '^/local/': '/', changeOrigin: true }  }, //非同步地址 '/api/': {  target:'https://xxxx.com/',//網路地址 pathRewrite: { '^/api/': '/', changeOrigin: true }  } } 

專案上線環境配置。遇到問題：node採用n管理切換不動。

1. 安裝nodejs管理軟體n； npm i -g n2. 升級到穩定版本；目前是node-v12.18.3 n stable3. n選擇版本失敗； #執行 vim ~/.bash_profile #新增到文件末尾 #切換node版本新增 export N_PREFIX=/usr/local #node 實際安裝位置 export PATH=$N_PREFIX/bin:$PATH #生效 source ~/.bash_profile

打包檔案

.nuxt/static/nuxt.config.jspackage.json

上傳至專案目錄

cnpm install

安裝pm2專案管理

//安裝pm2並執行。App為package.json專案名pm2 start npm --name "App" -- run start

nginx反向代理配置

server {    listen 80;    server_name xxx.com;    location / {        proxy_pass http://localhost:3000;    }}

域名解析到伺服器IP，網站生效。