nuxt.js带你入门

最新推荐文章于 2025-07-04 08:51:09 发布

原创最新推荐文章于 2025-07-04 08:51:09 发布 · 701 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#nuxt #nuxt修改port #nuxt环境变量 #全局变量

nuxt 专栏收录该内容

2 篇文章

订阅专栏

代码见：https://github.com/binliuli/nuxt.git

官网：https://zh.nuxtjs.org/guide/installation

框架搭建步骤见：（根据选择选择自己对应的插件等）

一、配置less预编译处理器：

npm i less less-loader --save-dev //安装后，就可以直接使用

二、打包部署流程

官方推荐的 package.json 配置如下：

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

推荐配置如下:

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "start": "nuxt start",
    "build": "nuxt build && npm start" 
  }
}

nuxt.js服务端渲染应用部署这样就完成了，官方先后执行 npm run build 、npm start 即可完成部署。而我这边只要执行npm run build ，其实我只是把两个合并成一个，并设置了端口以便区别其他应用，避免端口占用！

nuxt: 启动一个热加载的Web服务器（开发模式）
nuxt build: 利用webpack编译应用，压缩JS和CSS资源（发布用）。
nuxt start: 以生成模式启动一个Web服务器 (next build 会先被执行)。

三、全局变量设置：

plugins新建main.js

import Vue from 'vue' // vue 文件引入 - 方便在vue方法内容直接 this 调取
import Api from './api' // 自定变量内容 其他自便
 
let main = {
    install(Vue) {
        Vue.prototype.$api = Api; // 变量的内容 后期可以在vue中 this->$api.xxx 使用
    }
};
 
Vue.use(main); // 这里不能丢
 
// 这里是 为了在 asyncData 方法中使用
export default ({ app }, inject) => {
    // Set the function directly on the context.app object
    app.$api = Api // 名称
};

plugins新建api.js

let host = 'http://api.xxx.xxx';
console.log(process.env)
console.log(process.env.GLOBALCONFIG)
let api = {
    getSolidList: host + '/getSolidList.api'
};
export default api

使用方法：

created() {
    console.log(this.$api.getSolidList);
  }

四、环境变量配置：

package.json中添加:

"scripts": {
    "dev": "cross-env GLOBALCONFIG=pro nodemon server/index.js --watch server",
    "build": "cross-env GLOBALCONFIG=pro nuxt build && npm start",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },

nuxt.config.js:

 env: {
    GLOBALCONFIG: process.env.GLOBALCONFIG
  },

api.js:

console.log(process.env.GLOBALCONFIG) //做判断

nuxt.config.js文件添加：

 plugins: [{ src: '~/plugins/main.js', ssr: false }]

结果：

五、修改port

package.json文件添加：

"config":{
    "nuxt":{
      "port":"8000"
    }
  },

六、路由

layouts/default.vue 是默认页面指的是index的页面

但有的时候需要重新定义一个路由，全新的页面布局，整体和默认页面没有共同的部分，这个时候就需要新建：layouts/blog.vue

blog.vue代码如下：

<template>
  <div>
    <div>这里是博客导航</div>
    <nuxt />
  </div>
</template>

然后新建pages/post.vue：

post.vue代码如下：

<template>
  <div>
    <div>对应post</div>
  </div>
</template>
<script>
export default {
  layout: "blog" //关键
};
</script>

展示结果：

路由也可以这样嵌套：

展示效果：