nuxt如何配置

浮游本尊

已于 2023-08-02 09:51:29 修改

阅读量3.9k

点赞数 3

分类专栏： nuxt 初级前端 Vue 文章标签：前端

于 2021-06-29 12:13:54 首次发布

本文链接：https://blog.csdn.net/weixin_45658814/article/details/118332474

版权

Vue 同时被 3 个专栏收录

61 篇文章 1 订阅

订阅专栏

初级前端

18 篇文章 2 订阅

订阅专栏

nuxt

5 篇文章 0 订阅

订阅专栏

nuxt项目目录结构

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必须为false

plugins: [
    {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> 
</div>
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
  },

利用环境变量区分

publicPath: process.env.PATH_TYPE === 'gray' ? '/_nuxt/' : 'https://cdn.xxx/_nuxt/',

浮游本尊

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
nuxt如何配置

目录nuxt项目目录结构Nuxt.config.js配置模式如何选择-SPA/Universalplugins 属性配置区分发布环境，部署cdnnuxt项目目录结构|-- .nuxt // Nuxt自动生成，临时的用于编辑的文件，build|-- assets // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript|-- components
复制链接

扫一扫