风尚云网学习-vue项目的构建/打包/发布

最新推荐文章于 2024-04-03 02:51:31 发布

风尚云网

最新推荐文章于 2024-04-03 02:51:31 发布

阅读量1.3k

点赞数 5

分类专栏：风尚云网学习文章标签：前端 javascript vue.js 风尚云网打包

本文链接：https://blog.csdn.net/zsx0806/article/details/124250098

版权

风尚云网学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

工作中我相信很多朋友对于VUE项目的一系列流程不熟悉，风尚云网学习整理了关于vue项目的构建打包发布全过程，希望对你有用。

一、vue项目的创建：

1、首先你要安装有Node.js及npm

2、安装vue脚手架

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# vue最新稳定版

npm install vue

3.创建vue项目

《风尚坐火箭学习vue》-- 第二十章：手把手教你用Vue脚手架建一个项目_风尚云网的博客-CSDN博客前言：前端框架千千万，独有vue占一半我是风尚，让我们一起坐火箭去学习Vue第二十章：手把手教你用Vue脚手架建一个项目上章回顾：今天就先简单带你了解一下Vue的组件，剩下的还有很多，等以后讲的时候再说。“好！”风尚说。"今天下午,再给你详细的讲一下用Vue脚手架建一个项目。"老头说道。首先，按win+r键：输入cmd回车回车后进入黑窗口,输入cd/后cd /进入下图：输入node -v查看nodeJS的版本号：node -v...https://blog.csdn.net/zsx0806/article/details/121777034

二、vue项目的打包：

npm打包命令：

npm run build

使用npm run build进行打包，这个时候你直接打开dist/下的index.html,会发现文件可以打开，但是所有的js，css，img等路径有问题是指向根目录的，于是乎出现了找不到路径/空白页面等等问题：

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

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文件就可以访问了。