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

三、vue项目的发布：

直接把dist这个文件夹上传到自己的服务器即可。

教程到此结束，有问题欢迎大家下方评论~

自己做的导航网：风尚云网导航站：

风尚云网导航-很有范的导航站风尚云网提供了编程的基础技术游戏, HTML、CSS、Javascript等各种小游戏，也提供了强大的在线搜索功能，实用，有趣http://1813783665.3vzhuji.cc/风尚云网-风尚云搜：我们致力于更快更全的搜索！接口持续更新！敬请期待！！！风尚云网-风尚云搜：我们致力于更快更全的搜索！接口持续更新！敬请期待！！！http://1813783665.3vzhuji.cc/caidan/sou.html自己做的搜索工具，风尚云网云搜。欢迎大家使用反馈~~~~~

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

Vue项目部署，打包发布上线
参考vuecli官方文档一.构建打包在发布上线之前,我们需要执行构建打包,将 .less..vue..js 等相关资源进行编译打包,转换成浏览器可以直接识别运行的普通 css.js.html. # ...
Vue高效的构建打包发布
项目快结束啦,今天学习怎么优化打包项目,ヾ(◍°∇°◍)ﾉﾞ在命令行中输入以下命令,在dist下生成report.html,打开可以看到每部分大小~ npm run build -- --repor ...
vue项目通过HBuilder打包发布
一.打包工具HBuilder 1. 下载地址https://www.dcloud.io/hbuilderx.html 2. 根据需要进行下载,下载之后为压缩包,解压获得文件夹,在文件夹中找到HBuil ...
vue项目搭建及打包运行
目录一.概述二.vue推荐开发环境三.node介绍及安装 1.npm是什么: 2.node是什么 3.npm和Node.js的发展 4.node安装 5.安装vue-cli 四.新建vue项目 ...
vue项目查看构建后项目报告，项目个模块依赖占比比例情况
vue项目查看构建后项目报告,项目个模块依赖占比比例情况 npm run build --report or "report": "vue-cli-service bui ...
vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
对vue项目js文件打包时进行混淆加密
对vue项目js文件打包时进行混淆加密环境 vue 3 vue cli 4 webpack 4.0.0 https://www.cnblogs.com/dragonir/p/14445767.htm ...
vue项目使用nwjs打包、替换exe桌面图标以及exe内容的图标全教程
关于vue项目使用nwjs打包.替换exe桌面图标以及exe内容的图标全教程单纯的打包exe(不含更改exe桌面图标以及内容图标) 前言:首先我们需要有一个自己的vue项目. 1)单纯前端自己玩的v ...
风尚云网学习-H5+css3+js上传文件页面提交不跳转
风尚云网学习-HTML+原生js上传文件页面提交不跳转页面效果图: 众所周知,from表单提交后会自动跳转url, 此时我们可以用一个空的frame 接收,阻止跳转废话不多说,上全部代码: < ...
学习笔记：Qt程序打包发布
目录前言步骤前言使用qt开发自动化测试软件,一般是先在自己的办公电脑上写,后续再发给测试机运行,需要使用Qt程序打包生成exe程序.有两种方法:"Qt Widgets Applica ...

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

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