vue中组件的导出导入_全栈之路：vuecli3项目从搭建优化到docker部署

上一篇&＃xff0c;认识Docker

全栈之路&＃xff1a;前端工程师如何从 0 开始了解 Docker

相信大部分人都已经知道怎么创建项目的&＃xff0c;可以跳过这一节&＃xff0c;看下一节。

1.1 安装&＃64;vue/cli

# 全局安装 vue-cli脚手架npm install -g &＃64;vue/cli

等待安装完成后开始下一步

1.2 初始化项目

vue create vue-cli3-project

1. 选择一个预设

可以选择默认预设&＃xff0c;默认预设包含了babel,eslint我们选择更多功能 Manually select features

回车后来到选择插件

插件选择

这边选择了(Babel、Router、Vuex、Css预处理器、Linter / Formatter 格式检查、Unit测试框架)

路由模式选择

是否使用 history模式的路由 (Yes)

选择一个css预处理器 (Sass/SCSS)

选择一个eslint配置

这边选择 ESLint &＃43; Standard config&＃xff0c;个人比较喜欢这个代码规范

选择什么时候进行 eslint 校验

选择(Lint on save)保存是检查

如果你正在使用的vscode编辑器的话&＃xff0c;可以配置eslint插件进行代码自动格式化

选择测试框架 (Mocha &＃43; Chai)

选择将这些配置文件写入到什么地方 (In dedicated config files)

是否保存这份预设配置&＃xff1f;(y)

选是的话&＃xff0c;下次创建一个vue项目&＃xff0c;可以直接使用这个预设文件&＃xff0c;而无需再进行配置。

在components目录下创建一个global目录&＃xff0c;里面放置一些需要全局注册的组件。

index.js作用只要是引入main.vue&＃xff0c;导出组件对象

在components中创建一个index.js&＃xff0c;用来扫描全局对象并自动注册。

// components/index.jsimport Vue from &＃39;vue&＃39;// 自动加载 global 目录下的 .js 结尾的文件const componentsContext &＃61; require.context(&＃39;./global&＃39;, true, /.js$/)componentsContext.keys().forEach(component &＃61;> { const componentConfig &＃61; componentsContext(component) /** * 兼容 import export 和 require module.export 两种规范 */ const ctrl &＃61; componentConfig.default || componentConfig Vue.component(ctrl.name, ctrl)})

最后在入口文件main.js中导入这个index.js中就可以了

在 Vue项目中使用路由&＃xff0c;相信想熟的人已经很熟悉怎么使用了&＃xff0c;要新增一个页面的话&＃xff0c;需要到路由配置中配置该页面的信息。

如果页面越来越多的话&＃xff0c;那么如何让我们的路由更简洁呢&＃xff1f;

3.1 拆分路由

根据不同的业务模块进行拆分路由

在每个子模块中导出一个路由配置数组

在根 index.js中导入所有子模块

3.2 自动扫描子模块路由并导入

当我们的业务越来越庞大&＃xff0c;每次新增业务模块的时候&＃xff0c;我们都要在路由下面新增一个子路由模块&＃xff0c;然后在index.js中导入。

那么如何简化这种操作呢&＃xff1f;

通过上面的自动扫描全局组件注册&＃xff0c;我们也可以实现自动扫描子模块路由并导入

作为前端开发者&＃xff0c;放着 node这么好用的东西如果不能运用起来&＃xff0c;岂不是很浪费&＃xff1f;

虽然我们通过上面已经实现了组件的自动注册&＃xff0c;不过每次新建组件的时候&＃xff0c;都要创建一个目录&＃xff0c;然后新增一个.vue文件&＃xff0c;然后写template、script、style这些东西&＃xff0c;然后新建一个index.js、导出vue组件、虽然有插件能实现自动补全&＃xff0c;但还是很麻烦有木有。那么我们能不能通过node来帮助我们干这些事情呢&＃xff1f;只要告诉node帮我生成的组件名称就行了。其它的事情让node来干

4.1 通过node来生成组件

• 安装一下chalk&＃xff0c;这个插件能让我们的控制台输出语句有各种颜色区分

npm install chalk --save-dev

在根目录中创建一个 scripts 文件夹&＃xff0c;

新增一个generateComponent.js文件&＃xff0c;放置生成组件的代码、

新增一个template.js文件&＃xff0c;放置组件模板的代码

• template.js

// template.jsmodule.exports &＃61; { vueTemplate: compoenntName &＃61;> { return &＃96;

generateComponent.js(可以直接查看运行效果)

// generateComponent.js&＃96;const chalk &＃61; require(&＃39;chalk&＃39;)const path &＃61; require(&＃39;path&＃39;)const fs &＃61; require(&＃39;fs&＃39;)const resolve &＃61; (...file) &＃61;> path.resolve(__dirname, ...file)const log &＃61; message &＃61;> console.log(chalk.green(&＃96;${message}&＃96;))const successLog &＃61; message &＃61;> console.log(chalk.blue(&＃96;${message}&＃96;))const errorLog &＃61; error &＃61;> console.log(chalk.red(&＃96;${error}&＃96;))const { vueTemplate, entryTemplate } &＃61; require(&＃39;./template&＃39;)const generateFile &＃61; (path, data) &＃61;> { if (fs.existsSync(path)) { errorLog(&＃96;${path}文件已存在&＃96;) return } return new Promise((resolve, reject) &＃61;> { fs.writeFile(path, data, &＃39;utf8&＃39;, err &＃61;> { if (err) { errorLog(err.message) reject(err) } else { resolve(true) } }) })}log(&＃39;请输入要生成的组件名称、如需生成全局组件&＃xff0c;请加 global/ 前缀&＃39;)let componentName &＃61; &＃39;&＃39;process.stdin.on(&＃39;data&＃39;, async chunk &＃61;> { const inputName &＃61; String(chunk).trim().toString() /** * 组件目录路径 */ const componentDirectory &＃61; resolve(&＃39;../src/components&＃39;, inputName) /** * vue组件路径 */ const componentVueName &＃61; resolve(componentDirectory, &＃39;main.vue&＃39;) /** * 入口文件路径 */ const entryComponentName &＃61; resolve(componentDirectory, &＃39;index.js&＃39;) const hasComponentDirectory &＃61; fs.existsSync(componentDirectory) if (hasComponentDirectory) { errorLog(&＃96;${inputName}组件目录已存在&＃xff0c;请重新输入&＃96;) return } else { log(&＃96;正在生成 component 目录 ${componentDirectory}&＃96;) await dotExistDirectoryCreate(componentDirectory) // fs.mkdirSync(componentDirectory); } try { if (inputName.includes(&＃39;/&＃39;)) { const inputArr &＃61; inputName.split(&＃39;/&＃39;) componentName &＃61; inputArr[inputArr.length - 1] } else { componentName &＃61; inputName } log(&＃96;正在生成 vue 文件 ${componentVueName}&＃96;) await generateFile(componentVueName, vueTemplate(componentName)) log(&＃96;正在生成 entry 文件 ${entryComponentName}&＃96;) await generateFile(entryComponentName, entryTemplate) successLog(&＃39;生成成功&＃39;) } catch (e) { errorLog(e.message) } process.stdin.emit(&＃39;end&＃39;)})process.stdin.on(&＃39;end&＃39;, () &＃61;> { log(&＃39;exit&＃39;) process.exit()})function dotExistDirectoryCreate(directory) { return new Promise((resolve) &＃61;> { mkdirs(directory, function () { resolve(true) }) })}// 递归创建目录function mkdirs(directory, callback) { var exists &＃61; fs.existsSync(directory) if (exists) { callback() } else { mkdirs(path.dirname(directory), function () { fs.mkdirSync(directory) callback() }) }}

• 配置package.json

"new:comp": "node ./scripts/generateComponent"

• 执行

如果使用 npm 的话 就是

npm run new:comp

如果使用 yarn 的话 就是

yarn new:comp

4.2 通过node来生成页面组件

通过上面的逻辑代码我们可以通过node来生成组件了&＃xff0c;那么也可以举一反三来生成页面组件。只需稍微修改一下生成组件代码的逻辑。 在scripts目录下新建一个generateView.js文件

// generateView.jsconst chalk &＃61; require(&＃39;chalk&＃39;)const path &＃61; require(&＃39;path&＃39;)const fs &＃61; require(&＃39;fs&＃39;)const resolve &＃61; (...file) &＃61;> path.resolve(__dirname, ...file)const log &＃61; message &＃61;> console.log(chalk.green(&＃96;${message}&＃96;))const successLog &＃61; message &＃61;> console.log(chalk.blue(&＃96;${message}&＃96;))const errorLog &＃61; error &＃61;> console.log(chalk.red(&＃96;${error}&＃96;))const { vueTemplate } &＃61; require(&＃39;./template&＃39;)const generateFile &＃61; (path, data) &＃61;> { if (fs.existsSync(path)) { errorLog(&＃96;${path}文件已存在&＃96;) return } return new Promise((resolve, reject) &＃61;> { fs.writeFile(path, data, &＃39;utf8&＃39;, err &＃61;> { if (err) { errorLog(err.message) reject(err) } else { resolve(true) } }) })}log(&＃39;请输入要生成的页面组件名称、会生成在 views/目录下&＃39;)let componentName &＃61; &＃39;&＃39;process.stdin.on(&＃39;data&＃39;, async chunk &＃61;> { const inputName &＃61; String(chunk).trim().toString() /** * Vue页面组件路径 */ let componentVueName &＃61; resolve(&＃39;../src/views&＃39;, inputName) // 如果不是以 .vue 结尾的话&＃xff0c;自动加上 if (!componentVueName.endsWith(&＃39;.vue&＃39;)) { componentVueName &＃43;&＃61; &＃39;.vue&＃39; } /** * vue组件目录路径 */ const componentDirectory &＃61; path.dirname(componentVueName) const hasComponentExists &＃61; fs.existsSync(componentVueName) if (hasComponentExists) { errorLog(&＃96;${inputName}页面组件已存在&＃xff0c;请重新输入&＃96;) return } else { log(&＃96;正在生成 component 目录 ${componentDirectory}&＃96;) await dotExistDirectoryCreate(componentDirectory) } try { if (inputName.includes(&＃39;/&＃39;)) { const inputArr &＃61; inputName.split(&＃39;/&＃39;) componentName &＃61; inputArr[inputArr.length - 1] } else { componentName &＃61; inputName } log(&＃96;正在生成 vue 文件 ${componentVueName}&＃96;) await generateFile(componentVueName, vueTemplate(componentName)) successLog(&＃39;生成成功&＃39;) } catch (e) { errorLog(e.message) } process.stdin.emit(&＃39;end&＃39;)})process.stdin.on(&＃39;end&＃39;, () &＃61;> { log(&＃39;exit&＃39;) process.exit()})function dotExistDirectoryCreate(directory) { return new Promise((resolve) &＃61;> { mkdirs(directory, function () { resolve(true) }) })}// 递归创建目录function mkdirs(directory, callback) { var exists &＃61; fs.existsSync(directory) if (exists) { callback() } else { mkdirs(path.dirname(directory), function () { fs.mkdirSync(directory) callback() }) }}

• 配置package.json 新增一个scripts脚本

"new:view": "node ./scripts/generateView"

• 执行

如果使用 npm 的话 就是

npm run new:view

如果使用 yarn 的话 就是

yarn new:view

5. axios封装

• 安装 axios

npm install axios --save// oryarn add axios

5.1 配置不同的环境

在根目录新建三个环境变量文件

分别输入不同的地址&＃xff0c; 比如dev就写 dev的api地址、test就写test的api地址

# // .envNODE_ENV &＃61; "development"BASE_URL &＃61; "https://easy-mock.com/mock/5c4c50b9888ef15de01bec2c/api"

接着在根目录中新建一个 vue.config.js

// vue.config.jsmodule.exports &＃61; { chainWebpack: config &＃61;> { // 这里是对环境的配置&＃xff0c;不同环境对应不同的BASE_URL&＃xff0c;以便axios的请求地址不同 config.plugin(&＃39;define&＃39;).tap(args &＃61;> { args[0][&＃39;process.env&＃39;].BASE_URL &＃61; JSON.stringify(process.env.BASE_URL) return args }) }}

然后在src目录下新建一个 api文件夹&＃xff0c;创建一个 index.js用来配置 axios的配置信息

// src/api/index.jsimport axios from &＃39;axios&＃39;import router from &＃39;../router&＃39;import { Message } from &＃39;element-ui&＃39;const service &＃61; axios.create({ // 设置超时时间 timeout: 60000, baseURL: process.env.BASE_URL})// post请求的时候&＃xff0c;我们需要加上一个请求头&＃xff0c;所以可以在这里进行一个默认的设置// 即设置post的请求头为application/x-www-form-urlencoded;charset&＃61;UTF-8service.defaults.headers.post[&＃39;Content-Type&＃39;] &＃61; &＃39;application/x-www-form-urlencoded;charset&＃61;UTF-8&＃39;&＃39;export default service

5.2 请求响应封装

import axios from &＃39;axios&＃39;import router from &＃39;../router&＃39;import { Message } from &＃39;element-ui&＃39;const service &＃61; axios.create({ // 设置超时时间 timeout: 60000, baseURL: process.env.BASE_URL})/** * 请求前拦截 * 用于处理需要在请求前的操作 */service.interceptors.request.use(config &＃61;> { const token &＃61; localStorage.getItem(&＃39;token&＃39;) if (token) { config.headers[&＃39;Authorization&＃39;] &＃61; token } return config}, (error) &＃61;> { return Promise.reject(error)})/** * 请求响应拦截 * 用于处理需要在请求返回后的操作 */service.interceptors.response.use(response &＃61;> { const responseCode &＃61; response.status // 如果返回的状态码为200&＃xff0c;说明接口请求成功&＃xff0c;可以正常拿到数据 // 否则的话抛出错误 if (responseCode &＃61;&＃61;&＃61; 200) { return Promise.resolve(response) } else { return Promise.reject(response) }}, error &＃61;> { // 服务器返回不是 2 开头的情况&＃xff0c;会进入这个回调 // 可以根据后端返回的状态码进行不同的操作 const responseCode &＃61; error.response.status switch (responseCode) { // 401&＃xff1a;未登录 case 401: // 跳转登录页 router.replace({ path: &＃39;/login&＃39;, query: { redirect: router.currentRoute.fullPath } }) break // 403: token过期 case 403: // 弹出错误信息 Message({ type: &＃39;error&＃39;, message: &＃39;登录信息过期&＃xff0c;请重新登录&＃39; }) // 清除token localStorage.removeItem(&＃39;token&＃39;) // 跳转登录页面&＃xff0c;并将要浏览的页面fullPath传过去&＃xff0c;登录成功后跳转需要访问的页面 setTimeout(() &＃61;> { router.replace({ path: &＃39;/login&＃39;, query: { redirect: router.currentRoute.fullPath } }) }, 1000) break // 404请求不存在 case 404: Message({ message: &＃39;网络请求不存在&＃39;, type: &＃39;error&＃39; }) break // 其他错误&＃xff0c;直接抛出错误提示 default: Message({ message: error.response.data.message, type: &＃39;error&＃39; }) } return Promise.reject(error)})export default service

Message 方法是 element-ui 提供的一个消息提示组件、大家可以根据自己的消息提示组件进行替换

5.3 断网处理

在响应拦截中添加处理逻辑

service.interceptors.response.use(response &＃61;> { const responseCode &＃61; response.status // 如果返回的状态码为200&＃xff0c;说明接口请求成功&＃xff0c;可以正常拿到数据 // 否则的话抛出错误 if (responseCode &＃61;&＃61;&＃61; 200) { return Promise.resolve(response.data) } else { return Promise.reject(response) }}, error &＃61;> { // 断网 或者 请求超时 状态 if (!error.response) { // 请求超时状态 if (error.message.includes(&＃39;timeout&＃39;)) { console.log(&＃39;超时了&＃39;) Message.error(&＃39;请求超时&＃xff0c;请检查网络是否连接正常&＃39;) } else { // 可以展示断网组件 console.log(&＃39;断网了&＃39;) Message.error(&＃39;请求失败&＃xff0c;请检查网络是否已连接&＃39;) } return } // 省略其它代码 ······ return Promise.reject(error)})

5.4 封装图片上传

// src/api/index.jsexport const uploadFile &＃61; formData &＃61;> { const res &＃61; service.request({ method: &＃39;post&＃39;, url: &＃39;/upload&＃39;, data: formData, headers: { &＃39;Content-Type&＃39;: &＃39;multipart/form-data&＃39; } }) return res}

调用

async uploadFile (e) { const file &＃61; document.getElementById(&＃39;file&＃39;).files[0] const formdata &＃61; new FormData() formdata.append(&＃39;file&＃39;, file) await uploadFile(formdata)}

5.5 请求 显示 Loading 效果

let loading &＃61; nullservice.interceptors.request.use(config &＃61;> { // 在请求先展示加载框 loading &＃61; Loading.service({ text: &＃39;正在加载中......&＃39; }) // 省略其它代码 ······ return config}, (error) &＃61;> { return Promise.reject(error)})service.interceptors.response.use(response &＃61;> { // 请求响应后关闭加载框 if (loading) { loading.close() } // 省略其它代码 ······}, error &＃61;> { // 请求响应后关闭加载框 if (loading) { loading.close() } // 省略其它代码 ······ return Promise.reject(error)})

6. 巧用 Mixins

6.1 封装 store 公用方法

假设有这样一个场景&＃xff0c;我们通过 vuex 封装了获取新闻列表的 function

import Vue from &＃39;vue&＃39;import Vuex from &＃39;vuex&＃39;import { getNewsList } from &＃39;../api/news&＃39;Vue.use(Vuex)const types &＃61; { NEWS_LIST: &＃39;NEWS_LIST&＃39;}export default new Vuex.Store({ state: { [types.NEWS_LIST]: [] }, mutations: { [types.NEWS_LIST]: (state, res) &＃61;> { state[types.NEWS_LIST] &＃61; res } }, actions: { [types.NEWS_LIST]: async ({ commit }, params) &＃61;> { const res &＃61; await getNewsList(params) return commit(types.NEWS_LIST, res) } }, getters: { getNewsResponse (state) { return state[types.NEWS_LIST] } }})

然后在新闻列表页&＃xff0c;我们通过 mapAction、mapGetters来调用Action和getters 我们需要写上这些代码

import { mapActions, mapGetters } from &＃39;vuex&＃39;computed: { ...mapGetters([&＃39;getNewsResponse&＃39;])},methods: { ...mapActions([&＃39;NEWS_LIST&＃39;])}

在假设&＃xff0c;在另一个页面又需要重新调用获取新闻列表的接口&＃xff0c;我们又要在写一遍上面的代码对吧&＃xff1f;

复制粘贴就是干有木有&＃xff1f;

如果接口突然加了一个参数&＃xff0c;那岂不是每个要用到这个接口的代码都得加这个参数。

复制粘贴一时爽&＃xff0c;需求一改你就爽

既然是重复的代码&＃xff0c;我们肯定要复用&＃xff0c;这时候Vue提供的Mixin就起了大作用了

• 封装 news-mixin.js 在 src下创建一个mixins目录&＃xff0c;用来管理所有的mixins 新建一个news-mixin.js

import { mapActions, mapGetters } from &＃39;vuex&＃39;export default { computed: { ...mapGetters([&＃39;getNewsResponse&＃39;]) }, methods: { ...mapActions([&＃39;NEWS_LIST&＃39;]) }}

然后在需要用到的组件中引入这个mixin&＃xff0c;就能直接调用这个方法了。不管多少个页面&＃xff0c;只要引入这个mixin&＃xff0c;直接就能使用。

需求一改的话&＃xff0c;也只需要修改这个mixin文件

// news/index.vueimport Vue from &＃39;vue&＃39;import newsMixin from &＃39;&＃64;/mixins/news-mixin&＃39;export default { name: &＃39;news&＃39;, mixins: [newsMixin], data () { return {} }, async created () { await this.NEWS_LIST() console.log(this.getNewsResponse) }}

6.2 扩展

除了封装 vuex 的公用方法&＃xff0c;其实还有很多的东西也能做封装。例如&＃xff1a;分页对象,表格数据,公用方法、等等就不一一举例了。可以看github

在多个地方经常使用&＃xff0c;就可以考虑封装成mixin&＃xff0c;不过请写好注释哦。不然就会有人在背后骂你了&＃xff01;&＃xff01;你懂的~~

7.1 gzip压缩

• 安装compression-webpack-plugin插件

npm install compression-webpack-plugin --save-dev// oryarn add compression-webpack-plugin --dev

• 在 vue.config.js 中添加配置

// vue.config.jsconst CompressionPlugin &＃61; require(&＃39;compression-webpack-plugin&＃39;)module.exports &＃61; { chainWebpack: config &＃61;> { // 这里是对环境的配置&＃xff0c;不同环境对应不同的BASE_URL&＃xff0c;以便axios的请求地址不同 config.plugin(&＃39;define&＃39;).tap(args &＃61;> { args[0][&＃39;process.env&＃39;].BASE_URL &＃61; JSON.stringify(process.env.BASE_URL) return args }) if (process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;production&＃39;) { // #region 启用GZip压缩 config .plugin(&＃39;compression&＃39;) .use(CompressionPlugin, { asset: &＃39;[path].gz[query]&＃39;, algorithm: &＃39;gzip&＃39;, test: new RegExp(&＃39;.(&＃39; &＃43; [&＃39;js&＃39;, &＃39;css&＃39;].join(&＃39;|&＃39;) &＃43; &＃39;)$&＃39;), threshold: 10240, minRatio: 0.8, cache: true }) .tap(args &＃61;> { }) // #endregion } }}

npm run build后能看到生成 .gz 文件就OK了。如果你的服务器使用nginx的话&＃xff0c;nginx也需要配置开启GZIP、下面会讲到如何在nginx中开启GZIP

7.2 第三方库引用cdn

对于 vue、vue-router、vuex、axios和element-ui等等这些不经常改动的库、我们让webpack不对他们进行打包&＃xff0c;通过cdn引入&＃xff0c;可以减少代码的大小、也可以减少服务器的带宽&＃xff0c;更能把这些文件缓存到客户端&＃xff0c;客户端加载的会更快。

• 配置vue.config.js

const CompressionPlugin &＃61; require(&＃39;compression-webpack-plugin&＃39;)module.exports &＃61; { chainWebpack: config &＃61;> { // 省略其它代码 ······ // #region 忽略生成环境打包的文件 var externals &＃61; { vue: &＃39;Vue&＃39;, axios: &＃39;axios&＃39;, &＃39;element-ui&＃39;: &＃39;ELEMENT&＃39;, &＃39;vue-router&＃39;: &＃39;VueRouter&＃39;, vuex: &＃39;Vuex&＃39; } config.externals(externals) const cdn &＃61; { css: [ // element-ui css &＃39;//unpkg.com/element-ui/lib/theme-chalk/index.css&＃39; ], js: [ // vue &＃39;//cdn.staticfile.org/vue/2.5.22/vue.min.js&＃39;, // vue-router &＃39;//cdn.staticfile.org/vue-router/3.0.2/vue-router.min.js&＃39;, // vuex &＃39;//cdn.staticfile.org/vuex/3.1.0/vuex.min.js&＃39;, // axios &＃39;//cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js&＃39;, // element-ui js &＃39;//unpkg.com/element-ui/lib/index.js&＃39; ] } config.plugin(&＃39;html&＃39;) .tap(args &＃61;> { args[0].cdn &＃61; cdn return args }) // #endregion } }}

• 修改index.html

vue-cli3-project We&＃39;re sorry but vue-cli3-project doesn&＃39;t work properly without Javascript enabled. Please enable it to continue.

7.3 全站cdn

我们已经把第三方库使用cdn替代了&＃xff0c;那么我们build后生成的 js,css之类的文件能否也用cdn呢&＃xff1f;

申请自己的cdn域名

要想把自己的资源上传到cdn上&＃xff0c;前提是得有自己的cdn域名&＃xff0c;如果没有的话&＃xff0c;可以到七牛云官网上注册申请一个

1. 注册七牛云账号
2. 到七牛云对象存储模块中新建存储空间
3. 输入存储空间信息

4、确定创建

5、创建成功后会跳转到这个存储空间的控制台页面

6、其中有个域名就是你的测试域名

7、我们可以在内容管理那上传我们的js、css之类的文件、不过我们的文件那么多&＃xff0c;一个一个上传明显不合理。要你你也不干。

这时候&＃xff0c;这些批量又重复的操作应该由我们的node出马&＃xff0c;让我们来通过 node来批量上传我们的资源文件

将生成的js、css资源上传到七牛cdn

在七牛云官网的文档中心有介绍如何通过node上传文件、感兴趣的人可以自己去研究一下。

1. 查看AccessKey和SecretKey&＃xff0c;在你的个人面板 -> 秘钥管理 &＃xff0c;这两个秘钥待会会用

1. 安装需要的插件

npm install qiniu glob mime --save-dev

1. 在 scripts目录下创建一个 upcdn.js 文件

// /scripts/upcdn.jsconst qiniu &＃61; require(&＃39;qiniu&＃39;)const glob &＃61; require(&＃39;glob&＃39;)const mime &＃61; require(&＃39;mime&＃39;)const path &＃61; require(&＃39;path&＃39;)const isWindow &＃61; /^win/.test(process.platform)let pre &＃61; path.resolve(__dirname, &＃39;../dist/&＃39;) &＃43; (isWindow ? &＃39;&＃39; : &＃39;&＃39;)const files &＃61; glob.sync( &＃96;${path.join( __dirname, &＃39;../dist/**/*.?(js|css|map|png|jpg|svg|woff|woff2|ttf|eot)&＃39; )}&＃96;)pre &＃61; pre.replace(//g, &＃39;/&＃39;)const options &＃61; { scope: &＃39;source&＃39; // 空间对象名称 }var config &＃61; { qiniu: { accessKey: &＃39;&＃39;, // 个人中心 秘钥管理里的 AccessKey secretKey: &＃39;&＃39;, // 个人中心 秘钥管理里的 SecretKey bucket: options.scope, domain: &＃39;http://ply4cszel.bkt.clouddn.com&＃39; }}var accessKey &＃61; config.qiniu.accessKeyvar secretKey &＃61; config.qiniu.secretKeyvar mac &＃61; new qiniu.auth.digest.Mac(accessKey, secretKey)var putPolicy &＃61; new qiniu.rs.PutPolicy(options)var uploadToken &＃61; putPolicy.uploadToken(mac)var cf &＃61; new qiniu.conf.Config({ zone: qiniu.zone.Zone_z2})var formUploader &＃61; new qiniu.form_up.FormUploader(cf)async function uploadFileCDN (files) { files.map(async file &＃61;> { const key &＃61; getFileKey(pre, file) try { await uploadFIle(key, file) console.log(&＃96;上传成功 key: ${key}&＃96;) } catch (err) { console.log(&＃39;error&＃39;, err) } })}async function uploadFIle (key, localFile) { const extname &＃61; path.extname(localFile) const mimeName &＃61; mime.getType(extname) const putExtra &＃61; new qiniu.form_up.PutExtra({ mimeType: mimeName }) return new Promise((resolve, reject) &＃61;> { formUploader.putFile(uploadToken, key, localFile, putExtra, function ( respErr, respBody, respInfo ) { if (respErr) { reject(respErr) } resolve({ respBody, respInfo }) }) })}function getFileKey (pre, file) { if (file.indexOf(pre) > -1) { const key &＃61; file.split(pre)[1] return key.startsWith(&＃39;/&＃39;) ? key.substring(1) : key } return file}(async () &＃61;> { console.time(&＃39;上传文件到cdn&＃39;) await uploadFileCDN(files) console.timeEnd(&＃39;上传文件到cdn&＃39;)})()

修改 publicPath

修改vue.config.js的配置信息&＃xff0c;让其publicPath指向我们cdn的域名

const IS_PROD &＃61; process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;production&＃39;const cdnDomian &＃61; &＃39;http://ply4cszel.bkt.clouddn.com&＃39;module.exports &＃61; { publicPath: IS_PROD ? cdnDomian : &＃39;/&＃39;, // 省略其它代码 ·······}

修改package.json配置

修改package.json配置&＃xff0c;使我们build完成后自动上传资源文件到cdn服务器

"build": "vue-cli-service build --mode prod && node ./scripts/upcdn.js