详解vue项目的构建，打包，发布全过程_若依前后端分离打包 - CSDN文库

36 浏览量更新于2023-03-03 评论收藏 54KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

详解详解vue项目的构建，打包，发布全过程项目的构建，打包，发布全过程

小编给大家通过本文详细介绍了关于vue.js项目的构建、打包、发布的全过程，文章很以后价值，值得你参考。

很多朋友对于VUE项目的一系列流程不熟悉，小编根据网友提出的问题，整理了关于vue项目的构建打包发布全过程，希望对

你有用。

一、一、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-plugin

productionGzip: 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 off

bundleAnalyzerReport: process.env.npm_config_report

}

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

三、三、github pages

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

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

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

四、自定义域名四、自定义域名

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

username.github.io/xxx/dist

这样的地址着实不是很美观，大家可以去阿里云上，自己买个域名，解析一下，网上都有，可以进行自定义的域名，来制作的

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38723559

粉丝: 1
资源: 961

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈