目录
nuxt项目目录结构
|-- .nuxt // Nuxt自动生成，临时的用于编辑的文件，build
|-- assets // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components // 用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
|-- layouts // 布局目录，用于组织应用的布局组件，不可更改。
|-- middleware // 用于存放中间件
|-- pages // 用于存放写的页面，我们主要的工作区域
|-- plugins // 用于存放JavaScript插件的地方
|-- static // 用于存放静态资源文件，比如图片
|-- store // 用于组织应用的Vuex 状态管理。
|-- .editorconfig // 开发工具格式配置
|-- .eslintrc.js // ESLint的配置文件，用于检查代码格式
|-- .gitignore // 配置git不上传的文件
|-- nuxt.config.json // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
|-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package.json // npm包管理配置文件
1、assects：静态资源文件，图片，共用的css等
2、components： 组件存放的目录
3、layouts：用于组织应用的布局组件，该目录名为Nuxt.js保留的，不可更改
4、middleware：目录用于存放应用的中间件
5、pages：用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置（不可更改）
6、plugins：插件目录（实例化之前需要运行的 Javascript 插件）
7、static：用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下（不可更改）
8、store：用于组织应用的 Vuex 状态树 文件（不可更改）
9、nuxt.config.js：配置js文件（不可更改）
10、package.json：依赖关系和对外暴露的脚本接口（不可更改）
了解目录后，我们就可以在根目录下找到nuxt.config.js
Nuxt.config.js配置
export default { mode: 'universal',//模式选择-SPA/Universal target: 'server',//这里默认的是static,如果部署纯静态页面就不用修改,如果是需要做动态的需要改成 server,其他的配置未做改动 //process.env全局设置,配置网站 title、icon 和 meta 标签 head: { title: 'project 项目名称', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } //以link的方式使用外部资源文件 浏览器icon link: [ { rel: 'icon', type: 'image/x-icon', href: 'https://xxx.ico' }， { rel: 'stylesheet', type: 'text/css', href: 'https://xxx.css' } // 使用外部资源文件，自动生成 script 标签 script: [ { src: 'https://xxxxxx', type: 'text/javascript', charset: 'utf-8' } // 进行ajax请求时顶部进度条的颜色 loading: { color: '#f47e36' }, // 全局样式导入 具体路径自定义 css: [ // css 重置文件表 '@/assets/css/reset.scss', //公共class '@/assets/css/common.scss', //轮播图 "swiper/dist/css/swiper.css" plugins: [ // plugins 使得你可以轻易地为 Nuxt.js 配置使用 Vue.js 插件 { src: "~/plugins/vue-swiper.js", ssr: false } components: true, buildModules: [ // nuxt 模块扩展 modules: [ '@nuxtjs/axios', '@nuxtjs/router' axios: { proxy: true//表示开启代理 server: {// 设置运行服务环境相关配置 port: 3000, // 端口号 host: '0.0.0.0', // default: localhost env: {//配置用来在服务端和客户端共享的全局变量 PATH_TYPE: process.env.PATH_TYPE proxy: { '/napi': { target: 'http://xxxx:xxx/',// 目标接口域名 changeOrigin: true,// 表示是否跨域 pathRewrite: { '^/napi': '/' // 把 /napi 替换成 / build: {//配置 Nuxt.js 项目的构建规则，即 Webpack 的构建配置 publicPath: process.env.PATH_TYPE === 'gray' ? '/_nuxt/' : 'https://cdn.xxx/_nuxt/', parallel: true,//区分发布环境，部署cdn transpile: [/^element-ui/],//引入element ui组件 extractCSS: { allChunks: true//不想让css和html代码浑在一起，想提高SEO，想把nuxt.js 的css分离出来 extend(config) {}模式如何选择-SPA/Universal
如下图，官网上对于Universal 和 Spa 两种render mode的区别，并没有加以说明，相信大多数人跟我一样有点懵，不知道选什么好。虽然两个模式创建的项目看不出区别。
先给出推荐选项： Universal
推荐理由：可以这样武断的说，用nuxt的人多半是为了解决SEO的问题，而Universal 和 Spa 的区别也恰好就在于对seo的实现存在差异。
spa是单页，所以只有一个入口文件，sitemap也就只有一个url，这会导致网站辛辛苦苦搭建的服务端渲染最多只被搜索引擎收录一个页面。而Universal则能实现所有网站路径完全被收录，这才是最初我们使用nuxt的初衷。plugins 属性配置
src: String (文件的路径)
ssr: Boolean (默认为 true) 如果值为 false，该文件只会在客户端被打包引入。
plugins 属性使得你可以轻易地为 Nuxt.js 配置使用 Vue.js 插件。
例如 (nuxt.config.js)：module.exports = { plugins: ['~plugins/vue-notifications']然后, 我们需要创建 plugins/vue-notifications.js 文件：
import Vue from 'vue' import VueNotifications from 'vue-notifications'Vue.use(VueNotifications)
plugins 属性配置的所有插件会在 Nuxt.js 应用初始化之前被加载导入。
每次你需要使用 Vue.use() 时，你需要在 plugins/ 目录下创建相应的插件文件，并在 nuxt.config.js 中的 plugins 配置项中配置插件的路径。这是官方文档的引入方式，但是实际用起来还是有点麻烦，例如开发的时候需要引入自己写的库，或者引入一些没打包成npm 的第三方插件，直接用Vue 这个大对象引入有点麻烦
这个时候你可以把对象绑定在window对象上，但是这样会有个问题，就是调用的时候必须要有window对象才行，以官方文档的lodash.js 库为例：
1.npm i --save lodash 下载lodash
2.在nuxt.config.js里面插入 ,注意ssr必须为falseplugins: [ {src: '~plugins/lodash.js', ssr: false}3.在 /plugins 文件夹下创建 lodash.js
let _ = require('lodash') window._ = _4.在页面里面就可以直接调用了
<div @click="shuffle"> <transition-group name="cell" tag="ul" class="side_tag" > <li v-for="cell in cells" :key="cell.id" class="cell"> {{ cell.number }} </li> </transition-group> export default { methods: { shuffle () { console.log() // this.tagList = _.shuffle() this.cells = window._.shuffle(this.cells) data () { return { tagList: {}, cells: Array.apply(null, {length: 14}) .map(function (_, index) { return { id: index, number: index % 9 + 1区分发布环境，部署cdn
nuxt build 后的前端资源都会存放在.nuxt/dist/ 文件夹下面
img 目录存放的是使用到的图片资源，无论是开发中存放在 assets 文件夹里的，还是static里的，都会统一生成到该目录里。
layouts 目录存放是layout 的布局js，pages 目录存放的是路由页面的js，其他的文件为nuxt创建的一些公共库和配置文件
所以部署cdn的时候，只要将 dist 文件夹推送到cdn服务器就行了，然后更改 publicPath ，这样子在nuxt build 的时候，静态资源就会自动初始化到publicPath 路径下
修改nuxt.config.js，在build 加上 publicPath配置。
注意，路径后面的‘/’ 不能忽略，假如忽略了之后，publicPath: ‘http://cdn.xxx/_nuxt’，js会路径会正常，但是img路径不正常，因此需求区分发布环境。
在 Nuxt.js 项目中，我们有一个全局的环境变量 process.env.NODE_ENV，默认情况下，这个变量的值要么是 production，要么是 development，分别表示生产环境和开发环境。而我们需要的环境可能不止这两种，我们还需要测试环境、预生产环境等等
现在是测试环境不加cdn，生产环境需要加cdn，那么就需要设置一下全局环境变量
利用cross-env，在package.json中配置：
"scripts": { "dev": "nuxt", "gray": "cross-env PATH_TYPE=gray nuxt build", "build": "cross-env PATH_TYPE=production nuxt build", "start": "nuxt start", "generate": "nuxt generate"在nuxt.config.js中配置
env: { PATH_TYPE: process.env.PATH_TYPE