1.準備工作
確保電腦有node,npm
2.初始化nuxt項目
控制臺輸入npm init nuxt-app <project-name>選擇自己需要的配置
如下圖項目就創(chuàng)建成功了
cd nuxt-demo進入項目
npm run dev啟動項目
3.開發(fā)頁面
- nuxt項目是不需要配置vue-router的蟀俊，在pages文件夾下的文件會自動生成router
- 修改項目配置（title钞翔、head恕齐、meta等）
export default {
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: 'nuxt-demo',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Global CSS (https://go.nuxtjs.dev/config-css)
css: [],
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [
// https://go.nuxtjs.dev/eslint
'@nuxtjs/eslint-module',
],
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
],
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {},
}
- 安裝移動端px轉rem插件postcss-px2rem
配置nuxt.config.js
export default {
...
build: {
postcss: {
plugins: {
'postcss-px2rem': {
remUnit: 75
}
}
}
}
...
}
在build里配置postcss轉rem的規(guī)則揖赴，這樣style樣式里可以使用px了
4.項目打包構建
-
npm run build
構建成功后在./nuxt文件夾下回出現(xiàn)默認為dist的文件夾凤藏，下面會有client和server兩個文件夾 -
npm start
啟動服務
5.部署到服務器
1慕的、安裝pm2守護進程
對于線上項目箩张，如果直接通過 node app來啟動甩骏，如果報錯了可能直接停止導致整個服務崩潰，我們可以使用pm2對node進程管理
- 安裝
npm install pm2 -g - 添加環(huán)境變量先慷，編輯.bashrc文件
vim ~/.bashrc,文件末尾處添加：export PATH="/usr/local/node-v10.13.0-linux-x64/lib/node_modules/pm2/bin/:$PATH"
PATH后面為自己服務器pm2安裝目錄
- 保存文件后重載source
source ~/.bashrc - 輸入
pm2 -v驗證以下是否配置成功
2饮笛、創(chuàng)建ecosystem.config.js
在項目根目錄下創(chuàng)建ecosystem.config.js，輸入以下內容
module.exports = {
apps: [
{
name: 'NuxtAppName',
exec_mode: 'cluster',
instances: 'max', // Or a number of instances
script: './node_modules/nuxt/bin/nuxt.js',
args: 'start'
}
]
}
3论熙、項目上傳到服務器
可以通過git拷貝或直接打包壓縮上傳
4福青、構建并啟動項目
進入服務器源代碼文件夾
首次需要安裝node_modules
npm i-
npm run build構建
-
pm2 start啟動pm2進程
pm2.png pm2 restart NuxtDemo重啟進程（代碼更新重新打包后用到）
nuxt項目默認3000端口，如需修改端口可在nuxt-config.js添加
...
build:{},
server: {
port: 8081
}
...
5脓诡、配置nginx代理
location / {
proxy_pass http://127.0.0.1:8081;
}
別忘了nginx -s reload无午，nginx重啟后就可以通過ip或服務器綁定的域名訪問項目了～
