精华内容
下载资源
问答
  • 纽克斯 启动应用 # 安装依赖 $ npm install # 本地启动在 localhost:3000 $ npm run dev # 部署到服务器,先build,再执行start启动 $ npm run build ...# 生成静态项目 $ npm run generate 更新nuxt详情请转到 。
  • 适用于nuxt项目的简单,现代,轻巧的字体加载器。 Nuxt字体加载器简单,现代,轻巧的字体加载器,适用于nuxt项目。 功能支持所有类型的字体加载:fire:(自托管,Google,Typekit等),遵循现代,快速,高效的字体...
  • 公司项目的面包屑导航是使用 element 的面包屑组件,配合一份 json 配置文件来实现的,每次写新页面都需要去写 json 配置,非常麻烦,所以写一个面包屑cli,自动生成页面、自动配置面包屑数据,提高效率:rocket: ...
  • nuxt-viewport依赖项添加到您的项目中 # Using npm npm install --save-dev nuxt-viewport # Using yarn yarn add --dev nuxt-viewport 添加nuxt-viewport的modules的部分nuxt.config.js { modules : [ [ '...
  • :fire:Nuxt Firebase轻松将Firebase集成到您的Nuxt项目中。 :open_book:阅读从v4到v5的完整文档升级指南!上次更新中的更改!:open_book:Upg:fire:Nuxt Firebase轻松将Firebase集成到您的Nuxt项目中。 :open_book:...
  • 注意:使用create-nuxt-app初始化的时候选择一个服务器,本项目选择了koa。server server/index.js将作为pm2的运行脚本 新增环境变量MY_ENV 添加环境变量MY_ENV来读取envConfig.js内配置(因为我们构建测试环境时,...
  • Vue.js原来是开发SPA(单页应用)的,但很多人想用Vue开发多页应用(有利于SEO操作),并在服务端完成渲染,于是Nuxt.js框架出生了,可实现用命令把vue项目生成为静态html。b.是什么?Nuxt.js简单的说是Vue.js的通用框架...

    a.为什么?

    Vue.js原来是开发SPA(单页应用)的,但很多人想用Vue开发多页应用(有利于SEO操作),并在服务端完成渲染,于是Nuxt.js框架出生了,可实现用命令把vue项目生成为静态html。

    b.是什么?

    Nuxt.js简单的说是Vue.js的通用框架,SSR,即服务器渲染,是在服务器端将对Vue页面进行渲染生成html文件,将html页面传递给浏览器。

    优点:

    基于 Vue.js

    自动代码分层

    服务端渲染

    强大的路由功能,支持异步数据

    静态文件服务

    ES6/ES7 语法支持

    打包和压缩 JS 和 CSS

    HTML头部标签管理

    本地开发支持热加载

    集成ESLint

    支持各种样式预处理器: SASS、LESS、 Stylus等等

    前提:已经在系统中安装了Node.js Node.js

    1.nuxt.js安装

    (1)用npm来安装vue-cli框架

    npm install vue-cli -g

    (2)使用vue安装 nuxt

    安装vue-cli后,就可以使用init命令来初始化Nuxt.js项目

    vue init nuxt/starter

    (3)使用npm install安装依赖包

    npm install

    (4)使用npm run dev 启动服务

    npm run dev

    (5)在浏览器输入 localhost:3000,可以看到结果

    2.package.json配置

    (1)端口配置

    "config":{

    "nuxt":{

    "host":"127.0.0.1",

    "port":"1818"

    }

    },

    3.配置全局CSS

    (1)在assets下新建css文件夹,并新建normailze.css(可以网上寻找相关初始化样式库)

    (2)配置

    在/nuxt.config.js下配置

    css:['~assets/css/normailze.css'],

    4.默认模板

    在根目录下创建一个app.html

    {{ HEAD }}

    {{ APP }}

    注意:这里的{{ HEAD }}读取的是nuxt.config.js里的信息,{{APP}} 就是我们写的pages文件夹下的主体页面了。需要注意的是HEAD和APP都需要大写,如果小写会报错的。

    默认模板配置完成后,要重启服务器,否则你的显示不会成功;但是默认布局是不用重启服务器的。

    5.错误页面配置 error.vue

    在layouts 下新建error.vue文件

    6.引入element ui

    (1)安装 element-ui

    npm i element-ui -S

    (2)在根目录下的plugins下创建element-ui.js文件

    import Vue from 'vue'

    import {Alert} from "element-ui";

    Vue.prototype.$ELEMENT = { size: 'small' };

    Vue.use(Alert)

    (3)修改nuxt.config.js文件

    css:[

    {src:'element-ui/lib/theme-chalk/index.css'}

    ],

    plugins: [{

    src:'~plugins/element-ui',

    ssr: true //是能在服务端运行

    }]

    7.封装axios

    (1)安装axios

    npm install axios --save

    (2)在plugins文件夹下面创建request.js

    import * as axios from 'axios'

    import {Message, Notification} from 'element-ui'

    let service = axios.create({

    baseURL: 'https://interface.meiriyiwen.com',//域名信息-测试

    timeout: 10000

    })

    // 请求拦截 可在请求头中加入token等

    service.interceptors.request.use(config => {

    return config

    }, error => {

    return Promise.reject(error)

    })

    // 响应拦截 对响应消息作初步的处理

    service.interceptors.response.use(resp => {

    if (resp.data) {

    if (resp.data.code !== '10000') {

    Message({

    type: 'error',

    message: resp.data.message,

    duration: 5000

    })

    }

    return {code: resp.data.code, data: resp.data.data, msg: resp.data.message}

    } else {

    return resp

    }

    }, error => {

    if (error.response) {

    switch (error.response.states) {

    case 400: {

    if (error.response && error.response.data && error.response.data.message) {

    Notification.error({

    title: '400错误',

    message: error.response.data.message,

    duration: 5000,

    closable: true

    })

    }

    break

    }

    }

    }

    })

    export default service

    (3)创建统一接口文件

    在一级目录创建api文件夹,在api文件夹下面创建demo.js(可根据后台接口自定义命名)

    /demo.js代码

    import request from '@/plugins/request'

    //测试接口

    export function getDemoinfo (params) {

    return request({

    url: '/article/today?dev=1',//测试

    method: 'get',

    params: params

    })

    }

    (4)组件内调用接口

    title="成功提示的文案"

    type="success">

    {{content}}

    import {getDemoinfo} from '@/api/demo'

    export default {

    components: {},

    data() {

    return {

    content: ""

    }

    },

    created() {

    getDemoinfo().then(res => {

    console.log(res.data)

    this.content = res.data.content;

    }).catch(error => {

    console.log("error", error)

    })

    }

    }

    此时的项目目录为:

    项目目录.jpg

    8.部署到服务器上

    前提:nuxt是基于nodejs运行的,安装node是第一步,因此确保已经安装 Node.js

    (1)nuxt项目打包

    详细请移步nuxt官网

    第一步、在本地 npm run build,会在.nuxt文件夹下生成dist文件;

    第二步、把本地文件的.nuxt,static,package.json,nuxt.config.js,这四个文件夹放到服务器目录文件下

    比如我在服务器上创建了C:\inetpub\nuxt路径。

    第三步、用cmd进入目录文件夹,安装依赖

    npm install -production

    第四步、运行

    npm start

    目录以及项目文件如下:

    目录及文件

    此时项目在服务器的本地已经可以访问了,但在外部网络是无法进行访问的。这时Nginx就可以出场了。

    目的是通过域名访问到nuxt服务(此处测试的域名为www.wfaceboss.top)

    (1)Nginx安装

    第一步、Nginx 的安装步骤比较简单,安装在windows上推荐使用压缩包的安装方式,下载地址;(选择稳定版本)

    第二步、下载完成之后,进行解压可以看到如下文件结构

    nginx目录.jpg

    第三步、双击nginx.exe 就启动了

    在页面输入localhost。出现如下界面则表示安装成功。默认监听80端口号

    image.png

    第四步、若你的服务器上80端口被占用,则需要修改端口,操作如下:(我这里是将80修改成81,注意修改的端口需要服务器后台已经开放)

    修改nginx安装目录/conf/nginx.conf中的server配置

    #user nobody;

    worker_processes 1;

    #error_log logs/error.log;

    #error_log logs/error.log notice;

    #error_log logs/error.log info;

    #pid logs/nginx.pid;

    events {

    worker_connections 1024;

    }

    http {

    include mime.types;

    default_type application/octet-stream;

    #log_format main '$remote_addr - $remote_user [$time_local] "$request" '

    # '$status $body_bytes_sent "$http_referer" '

    # '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log logs/access.log main;

    sendfile on;

    #tcp_nopush on;

    #keepalive_timeout 0;

    keepalive_timeout 65;

    #gzip on;

    upstream nodenuxt {

    server 127.0.0.1:3000; # nuxt 项目监听PC端端口

    keepalive 64;

    }

    server {

    listen 81;

    server_name www.wfaceboss.top;

    #charset koi8-r;

    #access_log logs/host.access.log main;

    location / {

    proxy_pass http://nodenuxt;

    }

    #error_page 404 /404.html;

    # redirect server error pages to the static page /50x.html

    #

    error_page 500 502 503 504 /50x.html;

    location = /50x.html {

    root html;

    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80

    #

    #location ~ \.php$ {

    # proxy_pass http://127.0.0.1;

    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000

    #

    #location ~ \.php$ {

    # root html;

    # fastcgi_pass 127.0.0.1:9000;

    # fastcgi_index index.php;

    # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;

    # include fastcgi_params;

    #}

    # deny access to .htaccess files, if Apache's document root

    # concurs with nginx's one

    #

    #location ~ /\.ht {

    # deny all;

    #}

    }

    # another virtual host using mix of IP-, name-, and port-based configuration

    #

    #server {

    # listen 8000;

    # listen somename:8080;

    # server_name somename alias another.alias;

    # location / {

    # root html;

    # index index.html index.htm;

    # }

    #}

    # HTTPS server

    #

    #server {

    # listen 443 ssl;

    # server_name localhost;

    # ssl_certificate cert.pem;

    # ssl_certificate_key cert.key;

    # ssl_session_cache shared:SSL:1m;

    # ssl_session_timeout 5m;

    # ssl_ciphers HIGH:!aNULL:!MD5;

    # ssl_prefer_server_ciphers on;

    # location / {

    # root html;

    # index index.html index.htm;

    # }

    #}

    }

    (2)Nginx启动

    在nginx根目录下打开cmd命令窗口,启动Nginx

    start nginx

    其他命令

    nginx -s reload //重新载入nginx(当配置信息发生修改时)

    nginx -s quit //停止ngix

    nginx -h 查看帮助信息

    完成以上配置,当你打开浏览器 输入http://www.wfaceboss.top:81即可访问到nuxt服务了。

    注意:若是多次修改/conf/nginx.conf文件 后重启nginx ,在windows可能会出现多个nginx 进程服务,需要结束这些进程,然后重启方可解决。

    通过上述的操作我们已经实现用域名访问nuxt服务了,但关闭服务器上nuxt运行黑窗口时,服务就断了,我们不能实时盯着他吧,因此就需要PM2进行守护了。

    (1)pm2需要全局安装

    npm install -g pm2

    (2)pm2启动nuxt项目

    --cd 到项目目录

    --启动

    pm2 start /node_modules/nuxt/bin/nuxt.js --name 项目名称 (项目目录的node_modules包)

    注意:xxx是项目名称,即package.json中的name

    比如我当前为:

    pm2启动nuxt.png

    (3)pm2其他命令

    pm2 list

    pm2 show 0 #查看进程详细信息,0为PM2进程id

    pm2 stop all #停止PM2列表中所有的进程

    pm2 stop 0 #停止PM2列表中进程为0的进程

    pm2 reload all #重载PM2列表中所有的进程

    pm2 reload 0 #重载PM2列表中进程为0的进程

    pm2 delete 0 #删除PM2列表中进程为0的进程

    pm2 delete all #删除PM2列表中所有的进程

    到此我们基本完成nuxt项目从零到项目部署的搭建过程.

    展开全文
  • 本文档为个人博客文档系统的... ...先安装pm2 : npm i pm2 -g 然后复制下面几个文件到服务器: 我们进入项目路径执行npm install安装所需要的依赖 然后执行npm start项目就可以跑起来了 进入对应的目录执行 pm2 start.

    本文档为个人博客文档系统的备份版本、作者:小游、作者博客:点击访问

    参考:https://segmentfault.com/a/1190000014450967

    npm换源:npm config set registry https://registry.npm.taobao.org

    先安装pm2 : npm i pm2 -g

    然后复制下面几个文件到服务器:

    我们进入项目路径执行npm install安装所需要的依赖

    然后执行npm start项目就可以跑起来了

    进入对应的目录执行
    pm2 start npm --name "my-nuxt" -- run start
    可以把项目挂在后台了。
    其中 my-nuxt的名称是 我们在package中的项目名称。
    执行完pm2的启动命令后,我们用 pm2 list 查看一下进程列表

    停止pm2项目
    pm2 stop app_name|app_id

    重启
    pm2 restart app.js

    展开全文
  • 一、服务器中安装nodejs 1.官网中下载tar.xz包传到服务器中或者在相应版本中右键
  • 搭建nuxt项目

    2021-11-26 14:28:39
    接下来创建nuxt项目步骤: 一、选择一个目录输入cmd,将在这个目录建立nuxt项目 二、输入创建nuxt命令:npm create nuxt-app 项目名称 三、选择需要安装的插件 四、等待下载nuxt项目 五、用vscode打开...

    前提环境:node.js    vue-cli (具体安装下载node和vue-cli步骤在我博客vue项目搭建中有教程,可自行查看)

    安装nuxt:npm install --save nuxt 

    接下来创建nuxt项目步骤:

    一、选择一个目录输入cmd,将在这个目录建立nuxt项目

     二、输入创建nuxt命令:npm create nuxt-app 项目名称

     三、选择需要安装的插件

     四、等待下载nuxt项目

     五、用vscode打开项目

     输入npm run dev启动命令

    如遇出现这样的报错,不用管,这是node版本过低导致。

     用浏览器访问http://192.168.0.110:3001/   即可

     完成!!!!

    展开全文
  • nuxt项目部署

    2020-05-25 16:34:37
    npm i -g pm2 sudo ln -s /root/nodejs/bin/pm2 /usr/local/bin/ 2,打包和部署nuxt项目 运行 npm run build 修改package.json文件,添加config配置: { "name": "swqw", "version": "1.0.0", "description": "My ...

    1,安装node,npm,pm2

    必须使用root身份进入,非root身份参考https://blog.csdn.net/u010218170/article/details/104733217

    进入node官网获取最新的安装文件链接

    下载安装文件:

    wget https://nodejs.org/dist/v12.16.3/node-v12.16.3-linux-x64.tar.xz

    解压:

    tar -xvf   node-v6.10.0-linux-x64.tar.xz  

    建立软连接(需要root权限):

    mv node-v6.10.0-linux-x64  nodejs 
    sudo ln -s /root/nodejs/bin/npm /usr/local/bin/ 
    sudo ln -s /root/nodejs/bin/node /usr/local/bin/
    

    安装pm2并建立软链接:

    npm i -g pm2
    sudo ln -s /root/nodejs/bin/pm2 /usr/local/bin/

    2,打包和部署nuxt项目

    运行

    npm run build

    修改package.json文件,添加config配置:

    {
      "name": "swqw",
      "version": "1.0.0",
      "description": "My luminous Nuxt.js project",
      "author": "sdx",
      "private": true,
      "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate"
      },
      "dependencies": {
        "@nuxtjs/axios": "^5.3.6",
        "element-ui": "^2.4.11",
        "nuxt": "^2.0.0",
        "qs": "^6.9.4",
        "vue-baidu-map": "^0.21.22",
        "vue-i18n": "^8.17.4"
      },
      "devDependencies": {
        "@nuxtjs/proxy": "^1.3.3",
        "less": "^3.11.1",
        "less-loader": "^6.1.0"
      },
      "config": {
        "nuxt": {
          "host": "0.0.0.0",
          "port": "3011"
        }
      }
    }

    将.nuxt,package.json,nuxt.config.js,static四个文件或文件夹上传到服务器

    如果使用nuxt自有服务器将项目上线,需要将package.json的config里面的host改为公网IP,并开放端口;如果使用nginx代理服务器则保持0.0.0.0

    在项目文件夹下运行:

    npm i
    npm start

    即可启动项目,并显示访问地址

    运行curl 访问地址,若启动成功,则打印页面的html文本出来

    3,开启进程守护

    在项目文件夹下运行:

    pm2 start npm --name "my-nuxt" -- run start

    开启进程守护

    运行:

    pm2 list

    可以查看进程守护列表和状态

    4,项目更新

    更改了项目后需要重新build打包和上传到服务器,

    运行:

    pm2 restart

    刷新页面即可看到更改后的内容

    5,关于nginx配置参考https://blog.csdn.net/weixin_36185028/article/details/110210234

    展开全文
  • nuxt项目部署到线上环境,有多种方法,这里分享我使用的方法,一步步照着配置,就可以配置成功~ (1)项目先执行npm run build 打包好 (2)服务器安装node 和pm2依赖 服务器:切换到希望安装这两个依赖的...
  • 楼主系统说明: 系统环境: CentOS7.3 64位 版本工具: svn 1.7.14 nodeJs: 8.9.1 npm: 5.6.0 cnpm: 5.2.0 一: 安装vue相相关包 ...到项目目录下 cd /data/www/project/shop/yf_mall_v1.0.5 安装淘宝景象,...
  • npx create-nuxt-app 项目 #启动项目 package.json//user/list --> pages/_name/list.vue (/:name/list) /book/list 动态命名路由 pages/user/_id.vue pages/user/_name.vue 默认路由 pages/_.vue 嵌套路由 #...
  • nuxt项目部署教程

    2021-11-02 10:06:03
    nuxt打包项目有两种方式:一个是npm run generate, 另一个是npm run build。两种的区别是generate是生成一系列的静态页面,该页面的内容在打包的时候就已经注定了,即使某些有请求接口的数据变了,页面也不会变,...
  • nuxt项目清除console

    2021-09-24 14:50:46
    线上项目一般不允许存在console.log,所以需要对打包后的项目做处理。手动删除会影响之后项目开发的效率,所以选择对打包后的代码做处理。 Nuxt nuxt: 2.13.3 1:安装 yarn add babel-plugin-transform-...
  • linux 部署nuxt项目

    2020-05-15 16:00:24
    } } 5:将项目上传到服务器上并启动项目:上传位置随意 6:转到项目存储位置并执行 //package.json中的依赖需要安装 cnpm install 7:启动npm:注意到上传的项目位置进行启动 npm run start 8:启动项目:注意到...
  • Nuxt项目的部署

    千次阅读 2018-08-29 06:21:50
    项目中整合 vue + nuxt + axios + vuex + vue-router (nuxt 自带 vuex 和 vue-router),一个基于 Nuxt 的服务器端渲染 Demo PC端GitHub地址 移动端GitHub地址 一、PC端项目部署 关于项目部署折腾了我好多时间,...
  • Nuxt项目的安装和使用

    2021-05-17 20:06:20
    1. 什么是Nuxt.js Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI 渲染。 Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置...
  • 搭建和部署nuxt项目

    千次阅读 2019-11-02 18:32:01
    而使用nuxt开发的网站就可以让爬虫爬取,而且它是基于vue.js开发的服务端渲染应用框架,上手极快,大大的简化了SSR的开发难度。 本机环境 操作系统:centos7、Windows10 nodejs:v13.0.1 n...
  • nuxt项目发布-部署

    2021-01-15 20:10:50
    如何将nuxt项目进行发布部署 打包 Nuxt.js 应用 命令 描述 nuxt 启动一个热加载的web服务器(开发模式) localhost://3000 nuxt build 利用webpack编译应用,压缩js和css(发布用) nuxt start 以生产模式...
  • nuxt 项目 内存溢出导致项目崩溃问题 err: 解决: 更改package.json 在 script 中配置 --max-old-space-size = 想配置的内存大小 example: "local": "node --max-old-space-size=4096 node_modules/nuxt/bin/...
  • Nuxt项目从开始到部署

    2020-05-04 16:23:48
    前期接了个私人项目,做个官网,想到在公司都是使用vue技术栈,而官网刚好可以使用nuxt来做。 开始 安装 nuxt安装可以按照官网的步骤来 // 默认安装 create-nuxt-app yarn create nuxt-app <project-name> cd ...
  • 主要介绍了Nuxt项目支持eslint+pritter+typescript的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • (1)nuxt项目打包 详细请移步nuxt官网 第一步、在本地 npm run build,会在.nuxt文件夹下生成dist文件; 第二步、把本地文件的.nuxt,static,package.json,nuxt.config.js,这四个文件夹放到服务器目录文件下 比如我在...
  • 我们部署nuxt项目需要使用到如图框起来的两个.json文件和两个文件夹 前提:需要在服务器上安装node环境,以方便下载依赖。 图中node_modules则是相关依赖,与vue项目相同。 nohup.out是后台运行日志,nuxt.sh是运行...
  • nuxt项目总结-综合

    2020-09-15 13:40:09
    nuxt项目总结技术栈选择依赖nuxt的生命周期(及其重要,学习框架必须了解生命周期,及其原理)基于nuxt的axios二次封装为何能够SEO优化使用SSR所解决的问题SSR渲染原理为什么要用引入node中间层使用SSR最难处理的点...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,429
精华内容 3,371
关键字:

nuxt项目