一、vue项目的创建

1、首先第一肯定是要有Node.js及npm这个不多说了
2、安装脚手架

此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览，使用vue全家桶制作自己的博客。
现在就有我来说说如何讲vue项目发布到github上
之前写过vue环境搭建可以参考： vue环境搭建

二、vue项目的打包

1、大家都知道使用npm run build进行打包，这个时候你直接打开dist/下的index.html,会发现文件可以打开，但是所有的js，css，img等路径有问题是指向根目录的，

　此时需要修改config/index.js里的assetsPublicPath的字段，初始项目是/他是指向项目根目录的也是为什么会出现错误，这时改为./

根目录：在计算机的文件系统中，根目录指逻辑驱动器的最上一级目录，它是相对子目录来说的；它如同一棵大树的“根”一般，所有的树杈以它为起点，故被命名为根目录。以微软公司开发的Windows操作系统为例：打开我的计算机（计算机），双击C盘就进入C盘的根目录。双击D盘就进入D盘的根目录

 build: {env: require('./prod.env'),index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './',productionSourceMap: true,// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: false,productionGzipExtensions: ['js', 'css'],// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// `npm run build --report`// Set to `true` or `false` to always turn it on or offbundleAnalyzerReport: process.env.npm_config_report}

在从dist根目录打开index文件就可以访问了。

三、github pages

1、首页创建一个仓库，此处直接忽略

2、在这里选择master或者/doc 上传代码到master

3、上面有一行域名就是你自己的页面可以看到自己发布的项目

四、自定义域名

1、这个时候就可以浏览自己的项目了，但是

username.github.io/xxx/dist
这样的地址着实不是很美观，大家可以去阿里云上，自己买个域名，解析一下，网上都有，可以进行自定义的域名，
来制作的自己的博客，代码部署到github上。这篇文章这里就先不做讲解了，有想使用自定义域名，也可以私信我。

总结

这里发布页面，其实最主要的时候坑是路径问题，需要修改配置文件，大家没事可以多多浏览文档了解vue的整体架构逻辑，后续再给大家带来框架从入门到放弃。

vue项目构建打包发布三部曲相关推荐

Vue项目构建后通过Nginx/SpringBoot/Express/Egg发布
Vue项目构建后通过Nginx/SpringBoot/Express/Egg发布构建当项目开发完毕,只需要运行一行命令就可以打包你的应用: $ yarn build or $ npm run bu ...
React Native项目自动化打包发布
今天这篇文章的目的是在rn项目的构建,并不会涉及到rn框架或者使用的讲解,说起构建,特别是前端构建大家应该很快会想到webpack.Grunt. Gulp等.而这些工具在rn项目中就显得有些鸡肋.所以 ...
Vue项目构建开发入门
Vue项目构建开发入门开篇:Vue CLI 3 项目构建基础大家好,当你点进这个标题,开始阅读本章的时候,说明你对 Vue.js 是充满好奇心和求知欲的.我之前写过一篇文章,这样评价 Vue.js ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
Vue项目的打包\部署\优化
Vue项目的打包\部署\优化如果有帮助到你麻烦点个赞或者收藏 +关注哟以后会经常发布一些干货文章我只是一个前端小菜鸟,大佬勿喷! 一.nginx 开启 gzip 理论上,nginx 开启 ...
Vue 项目的成功发布和部署
最近一直在尝试对 Vue 项目进行打包和发布,发现通过 npm run build 打包生成的 dist 文件不能直接放到服务器下面进行部署,否则会出现以下问题: 究其原因是,无法正确找到相关 js ...
Vue项目优化打包——前端加分项
前言 Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项.跟随本文的脚步来看看如何对项目进行优化吧~ 一.路由懒加载为什么需要路由懒加载当刚运行项目的时 ...
Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
vue项目构建和部署_零部署：使用Vue和VuePress构建文档系统
vue项目构建和部署 Documentation is food for the developer's soul, and too many times we find it arduous to ...

vue项目构建打包发布三部曲

一、vue项目的创建

二、vue项目的打包

三、github pages

四、自定义域名

总结

vue项目构建打包发布三部曲相关推荐

最新文章

热门文章

vue项目 构建 打包 发布 三部曲

一、vue项目的创建

二、vue项目的打包

三、github pages

四、自定义域名

总结

vue项目 构建 打包 发布 三部曲相关推荐

最新文章

热门文章

vue项目构建打包发布三部曲

vue项目构建打包发布三部曲相关推荐