nuxtjs如何部署cdn及区分发布环境

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.modb.pro/_nuxt’,js会路径会正常,但是img路径不正常

  build: {
    publicPath: process.env.PATH_TYPE === ‘gray‘ ? ‘/_nuxt/‘ : ‘https://cdn.modb.pro/_nuxt/‘,
    parallel: true,
    transpile: [/^element-ui/],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    },
    filenames: {
      chunk: ‘modb.2.6.[id].js‘
    }
  }

2、区分发布环境

  在 Nuxt.js 项目中,我们有一个全局的环境变量 process.env.NODE_ENV,默认情况下,这个变量的值要么是 production,要么是 development,分别表示生产环境和开发环境。而我们需要的环境可能不止这两种,我们还需要测试环境、预生产环境等等

  现在就是我的测试环境不加cdn,生产环境需要加cdn,那么就需要设置一下全局环境变量

  利用cross-env

  "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.modb.pro/_nuxt/‘,

原文地址:https://www.cnblogs.com/goloving/p/11731496.html

时间: 2024-11-10 15:34:49

nuxtjs如何部署cdn及区分发布环境的相关文章

Linux:多Tomcat服务, 统一安装部署 unifyDeploy0.2版本发布

下载地址:  unifyDeploy0.1版本  unifyDeploy0.2版本 1       引言 基于JAVA开发项目,随着服务的越来越多,配置文件更是眼花缭乱,每次不知道因为配置问题浪费多少时间,更不知道因为配置问题出过多少问题.多台服务器来回切换,如果服务需要依赖,启动更是问题. 1.1 目的 一次修改,统一安装:操作简单,实用高效. 1.2 范围 本项目使用范围包括: 基于JAVA开发项目 项目相关服务繁多 服务启动有依赖关系 1.3 读者 本需求规格说明书的阅读者或其他文档干系人

CentOS + Python3.6+ Django2.0 + uwsgi + nginx + mysql web发布环境搭建

目录: CentOS上升级Python 安装easy_install和pip uwsgi安装及测试 Django安装及测试 连接uwsgi与Django nginx安装及测试 连接uwsgi与nginx 连接uwsgi与Django与nginx uwsgi ini mysql安装设置 python3 Django mysql连接及测试 快速搭建blog测试 Pycharm开发 如果只是想学习django开发直接用django本身自带的开发用服务器即可. 1. CentOS上升级Python 用的

VUE 利用webpack 给生产环境和发布环境配置不同的接口地址

第一步,分别设置不同的接口地址 首先,我们分别找到下面的文件: /config/dev.env.js /config/prod.env.js 其实,这两个文件就是针对生产环境和发布环境设置不同参数的文件.我们打开dev.en.js文件.代码如下: var merge = require('webpack-merge') var prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"develop

同一个Docker swarm集群中部署多版本的测试环境

先介绍下用到的技术 Docker swarm: Docker官方的集群管理工具,相比kubernetes更加简单,容易入门.https://docs.docker.com/engine/swarm/ Traefik: 一个现代化的反向代理工具,原生支持Docker swarm模式,可以实现swarm的动态代理.https://docs.traefik.io/user-guide/swarm-mode/ 下图展示主要的思路: 在Docker swarm中创建某个测试版本service时,通过设置s

ISA2006安装和部署基础(虚拟机非域环境)

0x00. 为了测试基于HTTP隧道的绕过ISA,必须搭建模拟环境,为了不麻烦,我们这里不配合域环境认证.本次实验利用Vmware 10.0搭建环境,实现ISA2006安装和部署,同时设定基于HTTP代理访问的问题.  本人在ISA的应用上也算是新手,查找了不少资料,有不对的还望批评指正. 搭建环境说明: Vmware Workstation 10.0 Window 2003 ( ISA_SERVER) Window 2003 (客户机) 0x01.各台机器配置: [Win2003-ISA200

SCVMM 2012 R2部署测试之二准备域环境

在hyper-v主机上分别建立虚拟机dc-1和scvmm2012,并将hy01.hy02.dc-1.scvmm2012全部入域.创建虚拟机的过程不在此介绍,按照需求调整配置即可,活动目录的创建提供两个脚本直接运行即可: 1. PWS Install-WindowsFeature AD-Domain-Services Import-Module ADDSDeployment Install-ADDSForest -CreateDnsDelegation:$false -DatabasePath:"

Spark入门实战系列--2.Spark编译与部署(上)--基础环境搭建

[注] 1.该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取: 2.Spark编译与部署将以CentOS 64位操作系统为基础,主要是考虑到实际应用一般使用64位操作系统,内容分为三部分:基础环境搭建.Hadoop编译安装和Spark编译安装,该环境作为后续实验基础: 3.文章演示了Hadoop.Spark的编译过程,同时附属资源提供了编译好的安装包,觉得编译费时间可以直接使用这些编译好的安装包进行部署. 1.运行环境说明 1.1 硬软件环境 l  主机

Citrix XenApp&XenDesktop 7.15 部署实践指南——第二节·环境介绍

参考之前的的XenServer或vSphere手册配置Hypervisor,并完成虚拟机操作系统模板的创建,然后按照下表创建虚拟机,修改计算机名,配置IP地址,加域:具体创建过程不再此手册中体现:XenServer部分相关内容参考itdali.cn . 所有Windows.Windows Server都强烈建议更新至最新的补丁,这样可避免在Citrix环境下很多问题的发生:所有Windows.Windows Server在制作模板时也都建议安装.net framework 3.5..net fr

Skype for business server 2015部署方案一:SFB环境需求及部署

Skype for Business 2015 环境需求 Skype for Business 通信与协作平台整合了源自 Skype 的客户端体验以及 Lync 的企业级安全性.合规性和控制力.与Lync 2013 相比,Skype for Business Server 2015? 提供包括状态.IM.语音和视频呼叫以及联机会议的功能外,且提供了全新的客户端体验.全新的服务器版本以及对 Office 365 中服务的更新.除了全新客户端体验之外,Skype for Business Serve