我们在使用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 项目名称'
}
}