加速访问——vue项目打包部署到oss服务器
2020/3/11 11:31:21
本文主要是介绍加速访问——vue项目打包部署到oss服务器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
刚开学,事情有点多,http还没机会更完0.0
下次下次哈哈哈~
接下来几篇是最近做招新报名表的一些笔记。
vue-cli3项目打包部署到oss服务器
-
安装
npm install webpack-aliyun-oss
-
在项目目录添加oss.js文件
.exports = { region: 'oss服务器区域', // 例如:oss-cn-beijing accessKeyId: 'accessKeyId', accessKeySecret: 'accessKeySecret', bucket: 'bucket' } 复制代码
-
对vue.config.js进行配置
上面的图片有两个vue.config.js是为了我自己方便调试,因为如果改成下面的配置的话,npm run serve
将无效,这时候每次都要npm run build
比较麻烦,也无法实时修改代码看效果。(另外一个js是你之前的vue.config.js)// const webpack = require("webpack"); // const path = require('path'); const oss = require('./oss.config'); // 引入刚刚创建的oss.js文件 const WebpackAliyunOss = require('webpack-aliyun-oss'); console.log(WebpackAliyunOss) module.exports = { devServer: { open: true, hot: true, }, publicPath: 'https://XXX/test/', //publicPath: './', productionSourceMap: false, configureWebpack: config => { let webpackAliyunOss = [ new WebpackAliyunOss({ from: ['./dist/**', '!./dist/**/*.html'], // 上传那个文件或文件夹 可以是字符串或数组 dist: "/test", // 需要上传到oss上的给定文件目录 region: oss.region, accessKeyId: oss.accessKeyId, accessKeySecret: oss.accessKeySecret, bucket: oss.bucket, // test: true, //上面一行,可以在进行测试看上传路径是否正确, 打开后只会显示上传路径并不会真正上传; // 因为文件标识符 "\" 和 "/" 的区别 不进行 setOssPath配置,上传的文件夹就会拼到文件名上, 丢失了文件目录,所以需要对setOssPath 配置。 setOssPath: filePath => { // some operations to filePath let index = filePath.lastIndexOf("dist"); let Path = filePath.substring(index + 4, filePath.length); return Path.replace(/\\/g, "/"); }, setHeaders: filePath => { // some operations to filePath // return false to use default header return { "Cache-Control": "max-age=31536000" }; } }) ]; config.plugins = [...config.plugins, ...webpackAliyunOss ]; } } 复制代码
-
若要防止信息被提交到github上,修改.gitignore 文件内容在文件最后添加
/oss.js
-
最后在控制台输入
npm run build
,在dist目录下打开index.html,将看到部署后的页面,是不是快速了许多~
这篇关于加速访问——vue项目打包部署到oss服务器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南