Vue项目通过CDN部署的全面指南，vue使用cdn

背景介绍

在现代Web开发中，提高网页加载速度和优化用户体验是至关重要的任务，CDN（内容分发网络）作为一种高效的资源分发方式，可以显著提升静态资源的加载速度，本文将详细介绍如何在Vue项目中使用CDN进行部署，包括前期准备、CDN配置、OSS服务启用以及最终的资源上传和构建步骤。

准备工作

1. 服务器与域名配置

1.1 购买并配置服务器

确保你拥有一台云服务器，并已安装好Node.js和npm，如果还没有，可以参考相关教程进行安装。

1.2 注册域名并绑定

购买合适的域名，并将其解析到你的服务器IP地址，域名解析通常在域名注册商处管理界面进行设置。

2. 安装必要依赖

Node.js: 确保安装了LTS版本，该版本更加稳定。

npm: 作为Node.js的包管理工具。

Vue CLI: 用于初始化和管理Vue项目。

npm install -g @vue/cli

3. 创建Vue项目

通过Vue CLI创建一个新的Vue项目或使用现有项目：

vue create my-vue-project
cd my-vue-project

CDN配置与OSS服务启用

1. CDN配置

1.1 开通CDN服务

以阿里云为例，登录阿里云控制台，找到CDN产品并开通按流量收费的服务。

1.2 添加加速域名

在CDN控制台中添加你需要加速的域名，选择“全站加速”，并填写源站信息（即服务器IP）。

1.3 CNAME解析

将域名解析记录类型改为CNAME，并填写CDN提供的CNAME地址，这步操作使得访问该域名时，请求会被引导至CDN节点。

2. 开启OSS服务

2.1 创建Bucket

登录OSS管理控制台，创建一个存储空间（Bucket），注意不要开启版本控制功能。

2.2 配置读写权限

将Bucket的读写权限设置为公共读，这样可以确保文件上传后可以被CDN节点正确访问。

资源上传与构建步骤

1. 安装OSS SDK并编写上传脚本

1.1 安装ali-oss npm包

npm install ali-oss --save

1.2 编写上传脚本

在项目根目录下创建upload.js文件：

const OSS = require('ali-oss');
const fs = require('fs');
const path = require('path');
let client = new OSS({
  region: 'oss-cn-hangzhou',
  accessKeyId: 'yourAccessKeyId',
  accessKeySecret: 'yourAccessKeySecret',
  bucket: 'yourBucketName'
});
async function put(fileName) {
  let result = await client.put(fileName, './dist/' + fileName);
  console.log('File Upload Success:', fileName);
} catch (e) {
  console.log('File Upload Failed:', fileName);
}
}
function readFileList(path, filesList) {
  let files = fs.readdirSync(path);
  files.forEach(itm => {
    if (itm) {
      let stat = fs.statSync(path + itm);
      if (stat.isDirectory()) {
        readFileList(path + itm + '/', filesList);
      } else {
        filesList.push(path + itm);
      }
    }
  }
}
let dist = readFileList('./dist/', []);
let i = 0, l = dist.length;
let uploadAsset = () => {
  if (i < l) {
    let name = dist[i].split('./dist/')[1];
    put(name);
    uploadAsset();
  } else {
    console.log('All files uploaded.');
  }
};
uploadAsset();

2. 修改package.json配置脚本命令

在package.json文件中添加构建与部署命令：

"scripts": {
  "build": "vue-cli-service build",
  "deploy": "node upload.js"
}

运行以下命令进行构建并上传：

npm run build
npm run deploy

3. 配置Vue项目的publicPath

在vue.config.js中设置publicPath为CDN的域名：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? 'https://your-cdn-domain.com/' : '/'
};

这样在生产环境下，打包生成的资源文件会引用CDN域名。

完成上述步骤后，你的Vue项目就成功通过CDN部署了，所有资源文件将被上传至OSS并通过CDN加速访问，从而大幅提升用户访问速度和体验。