Nuxt项目搭建到发布部署

1、项目目录结构：

方式一、直接利用官方提供好的脚手架工具进行搭建：npx create-nuxt-app <项目名>

目录会是这样(具体目录都放些什么，请看官方文档，详细)：

 

方式二、手工慢慢来，请看官方文档：https://zh.nuxtjs.org/guide/installation#%E4%BB%8E%E5%A4%B4%E5%BC%80%E5%A7%8B%E6%96%B0%E5%BB%BA%E9%A1%B9%E7%9B%AE

 

2、为项目添加sass样式表：

步骤1：命令：npm install --save-dev node-sass sass-loader

步骤2：在根目录的配置文件nuxt.config.js中进行引入你须要添加的全局样式表，如：

注：若是你须要在.vue文件内进行使用，须要在style标签中添加 lang="scss" 如：

 

3、发起请求时须要使用 axios时，假如你没有安装过相关的依赖，那么：

方式1：命令：npm install --save-dev axios 

而后在哪一个页面有须要时直接引用 import axios from 'axios'

方式2：命令：npm install --save-dev @nuxtjs/axios

（1）、进行全局配置，在nuxt.config.js中添加模块 '@nuxtjs/axios' 如：

（2）、简单使用如（具体能够参照站点：https://zh.nuxtjs.org/guide/async-data）：

注：假如你想须要在一个地方进行统一设置接口请求的API,须要经过注册拦截器和更改全局配置的话，你还能够这样：

（能够参考文档：https://axios.nuxtjs.org/)

一、你须要先在 plugins 目录下添加一个文件 axios.js，如：

 

 

二、引用使用，在nuxt.config.js中的plugins添加 '@/plugins/axios.js'，如：

三、想要生效看到效果是吧？请从新启动服务，命令：npm run dev

 

4、动态路由

一、假如你但愿你的站点连接对SEO更加友好点（请求详情的id不以问号的展现形式来链接），好比由 http........./product/details?id=xxxx 变为 http........./product/xxxx。那么，你能够这样玩：

(1)、目录结构如（注意是 _id.vue）：

Nuxt.js会把目录生成的路由表，如：

{ name: 'product-id', path: '/product/:id?', component: 'pages/product/_id.vue' }

固然，若是你以为这样的表述不够清晰，请稳步这里：https://zh.nuxtjs.org/guide/routing#%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1

 

(2)、目录结构好了，那么在实际的页面跳转中，该怎样把id传过去呢？path还好理解，特别是当你用到name(推荐方式)进行处理时，请看如下写法:

1)、方式1 (path): <nuxt-link :to="'/product/' + 这里传入你的id">点击进入详情</nuxt-link>,

好比item对象里有个id：<nuxt-link :to="'/product/' + item.id">点击进入详情</nuxt-link>

2)、方式2 (name): <nuxt-link :to="{name: 'product-id', params: {id: 这里传入你的id}}">点击进入详情</nuxt-link>,

 同上，好比item对象里有个id：<nuxt-link :to="{name: 'product-id', params: {id: item.id}}">点击进入详情</nuxt-link>

注：特别的，方式2时，传递id时请用params，要否则它自动识别不到。固然，若是你还有其它的参数要传的话，能够在params下的对象里书写，固然也能够再多跟一个query的字段来把参数带过去，如：

 <nuxt-link :to="{name: 'product-id', params: {id: item.id}, query: {xxx: xxxx}}">点击进入详情</nuxt-link>

 

 5、服务端渲染应用部署

一、须要发布的文件准备

（1）、先进行代码构建打包，命令：npm run build 

　　注：

　　　　1）、生成的包将会在 .nuxt 这个目录下

　　　　2）、因.nuxt这个目录在mac下是隐藏着的，因此（非Mac时能够忽略如下几点）

　　　　3）、须要显示用命令：defaults write com.apple.finder AppleShowAllFiles -bool true

　　　　4）、当执行了以上显示的后，接下来还须要操做重启下“访达”，  点击后弹出的框 进行退出"访达"（会本身重启）

　　　　5）、这下就能够看到隐藏的文件了，

　　　　6）、须要对文件能够再隐藏时，执行defaults write com.apple.finder AppleShowAllFiles -bool false , 再执行下第4步便可 (命令在显示的区别就是后面的 true 与 false)

 

二、须要放置到服务器上的代码只须要4个目录：.nuxt、static、nuxt.config.js、package.json如下图：

注：目录1（.nuxt）、这是打包构建好的全部依赖文件及源文件等等

　　目录2（static）、就是静态资源包，由于上面打包构建时，不会被打进去的，因此得带上它

　　目录3（nuxt.config.js）、一些配置文件，得带上。

　　目录4（package.json）、这就比较重要了,当"start": "cross-env NODE_ENV=production node server/index.js",时须要把它更改成："start": "nuxt start" 。

三、那么，如今把所须要的代码都准备好了后，那么接下来，把相关目录文件上传到你的域名所指向的根目录。

四、接下来得修改下服务端的配置文件，添加路径转发（proxy_pass）处理，因默认在本地运行时，都是访问 http://localhost:3000 ，我用的是nginx.配置如：

server {
　　listen 80;
　　server_name demo.htmlx.club;
　　location / {
　　　　proxy_pass http://localhost:3010;
　　　　index index.html index.htm;
　　}

}

注：配置完后须要对nginx进行重启，好比个人  cd /usr/local/nginx/sbin 到达sbin 下 判断是否配置正确: ./nginx -t  ， 提示成功后就进行执行重启操做：./nginx -s reload

五、最后，切换到域名所指向的根目录下，先能够npm i （安装项目所须要的全部依赖）.

六、好了，感受快好了，运行 npm run start 跑起来吧。

七、若是没有意外，运行了npm run start 后  再访问下你指定的域名，那是能够看到效果的了(右键查看源文件，能够看到渲染出数据了).

八、那么当你把刚才执行运行 npm run start 的命令框关闭时，再看下你的域名是还能正常访问？估计是挂了吧？没事，咱们有的是解决办法，请继续往下走。。。

 

6、安装pm2

一、全局安装命令 npm i pm2 -g 

二、安装完pm2后，那么就直接跑咯，命令：pm2 start npm -- run start （执行了这命令后就不用单独执行npm run start了哦），这里域名理论是能正常访问了，接下来，这服务就会一直在跑了，除非：你执行了pm2 stop （后面能够接相关参数的）中止了它。

三、固然了当你想查看下pm2所守护的进程有什么的话你能够用 pm2 list  , 又或者你想从新发布了项目后须要再重启一把，那你能够用 pm2 restart  

注：若是同一个服务器须要起多个pm2进程的话，能够以设置环境变量的形式。如：PM2_HOME=“xxx” pm2 start ........   https://pm2.keymetrics.io/docs/usage/specifics/

 

7、静态应用部署

一、当你的站是比较简单的，对SEO也有些少要求的，那么我建议你用静态应用部署。

二、这部署比较简单明了，就官网所说的 npm run generate，把生成的dist目录下的文件一把丢到服务器所指定域名的根目录下便可，啥事都没了。。

 

 

 

 好咯，就这么多先，有想法的能够一块儿评论来研究下哦~