vue 构建 如何配置 CDN

在有些场景并不是直接将 vue 项目进行构建 上传到本地服务器的，而是需要采用 CDN 的方式。

通常对于一个普通的项目来说，他的 vue.config.js 中的 publicPath 为以下三种

//相对路径
publicPath:"./",
//绝对路径
publicPath:"/",
//映射路径
publicPath:"/midware/"

如果需要配置为CDN地址的话也是使用 publicPath 这个属性

//CDN 地址
publicPath:"https://caterpillarpccdn.qingflow.com/qf-home"
//后面的 /qf-home 根据情况而定，一般是需要加的，/qf-home 通常是你要 redirect 到的路由

你还可能需要的一些配置

1.输出项目的 webpack 相关配置

vue inspect --mode production > output.prod.js

2.配置 vue.config.js 文件，重新配置 webpack 的打包方式

publicPath: "https://XXXcdn.qingflow.com/qf-home",
	//配置 webpack 打包的方式
  chainWebpack: (config) => {
    // 其他的 XXX.XXX.js 构建到 dist 根路径下
    config.output
      .chunkFilename("./[name].[contenthash:8].js")  // 修改代码分割后的文件的输出路径和文件名
      .end();

    // app.XXX.js 和 chunk-vendors.XXX.js 将其构建到 dist 根路径下
    config.output
      .filename("[name].[contenthash:8].js")  // 修改代码分割后的文件的输出路径和文件名
      .end();
  },