nuxt项目搭建0-1

官方地址

1.准备工作

确保电脑有node,npm

2.初始化nuxt项目

控制台输入npm init nuxt-app <project-name>选择自己需要的配置
如下图项目就创建成功了

cd nuxt-demo进入项目
npm run dev启动项目

3.开发页面

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的规则，这样style样式里可以使用px了

4.项目打包构建

npm run build
构建成功后在./nuxt文件夹下回出现默认为dist的文件夹，下面会有client和server两个文件夹
npm start
启动服务

5.部署到服务器

1、安装pm2守护进程

对于线上项目，如果直接通过 node app来启动，如果报错了可能直接停止导致整个服务崩溃，我们可以使用pm2对node进程管理

安装 npm install pm2 -g
添加环境变量，编辑.bashrc文件vim ~/.bashrc,文件末尾处添加：export PATH="/usr/local/node-v10.13.0-linux-x64/lib/node_modules/pm2/bin/:$PATH"

PATH后面为自己服务器pm2安装目录

保存文件后重载sourcesource ~/.bashrc
输入pm2 -v验证以下是否配置成功

2、创建ecosystem.config.js

在项目根目录下创建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或服务器绑定的域名访问项目了～