nuxt.config.js 配置

我们在使用Nuxt.js提供的create-nuxt-app 创建项目后，更希望对它自定义一些东西，这里我们可以在根目录下找到nuxt.config.js

Nuxt.config.js配置

// cnpm instaill --save-dev address  主要是获取当前设备IP
const address = require('address');
const localhost = address.ip() || 'localhost';

export default {
  /*
  ** Nuxt rendering mode
  ** See https://nuxtjs.org/api/configuration-mode
  */
  mode: 'universal',
  /*
  ** Nuxt target
  ** See https://nuxtjs.org/api/configuration-target
  */
  target: 'server',
  /*
  ** Headers of the page
  ** See https://nuxtjs.org/api/configuration-head
  */
 //process.env
  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://xx.xxx.com/xxxx/logo.jpg' }
    ],
    // 使用外部资源文件，自动生成 script 标签
    script: [
      { src: 'https://xxxxxx' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  // 进行ajax请求时顶部进度条的颜色
  loading: { color: '#f47e36' }, 
  /*
  ** Global CSS
  */
  // 全局样式导入  具体路径自定义
  css: [
    // css 重置文件表
    '@/assets/css/reset.scss',
    //公共class
    '@/assets/css/common.scss',
    //轮播图
    "swiper/dist/css/swiper.css"
  ],
  /*
  ** Plugins to load before mounting the App
  ** https://nuxtjs.org/guide/plugins
  */
  plugins: [
  // plugins  文件夹下边有介绍
    { src: "~/plugins/vue-swiper.js", ssr: false }
  ],
  /*
  ** Auto import components
  ** See https://nuxtjs.org/api/configuration-components
  */
  components: true,
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  // nuxt 模块扩展
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios'
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
    // 超时设置
    timeout: 10000,
    retry: { retries: 3 }
  },
  /*
  ** Build configuration
  ** See https://nuxtjs.org/api/configuration-build/
  */
  build: {
  },
  server :{
    host: localhost,
    port:3100
  },
  env :{
    npm_package_name:'project 项目名称'
  }
}

文件根目录 plugins 文件夹

//vue-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

Vue.use(VueAwesomeSwiper)

自动根据IP地址启动，并打开浏览器 package.json

主要是 “dev”: “nuxt --open”

{
  "name": "web-xxxx-nuxt",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt --open",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.12.0",
    "nuxt": "^2.14.0"
  },
  "devDependencies": {
    "address": "^1.1.2",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.2",
    "vue-awesome-swiper": "^3.1.3"
  }
}