vue打包部署(含2.0)

到这里vue的所有平时使用的知识点都写完了

先补充一下vue2.x的安装

## 全局脚手架
npm install vue/cli -g
## 查看版本
vue --version
## 新建项目
vue init webpack 【name】

2.x是有vue-router的,但是vuex和axios自己安装
3.x有vue-router和vuex,axios自己安装

vue2.x是没有自定义的==vue.config.js==配置文件的,他的配置文件是==config/index.js==,他的proxy代理配置也在这个文件的dev对象里,默认有个proxyTable的空对象

vue2.x写代码放静态文件都固定放在static文件夹里,放在别的地方找不到
vue2.x打包还有两处需要修改的地方

// config/index.js
build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // 这里原来是assetsPublicPath: '/', 改成
    assetsPublicPath: 'dist',
    ...
}

// 如果那天我想把打包文件夹改了,改两个地方
// assetsRoot: path.resolve(__dirname, '../xx'),
// assetsPublicPath: 'xx',
// build/utils.js 的47行
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    // 这里加上
    publicPath:'../../',
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

这样vue2.x(查看vue-cli有3.x的配置)的配置就一样了

打包
如果你是用webStrom开发工具,可以直接打开==package.json==文件,左边的绿色箭头直接点击就行


dev就是vue2.x的本地开发启动,build就是vue2.x的打包命令


serve就是vue3.x的本地开发启动,build就是vue3.x的打包命令

只要执行了打包,等程序执行完,就会在项目的一级目录出现一个新的文件夹,默认叫==dist==,修改别的打包名字,查看上面的配置

部署

因为前面已经把跨域都搞定了,现在只要找个服务器把打包的文件放进去就行,常见的,最小白的服务器有nginx,可以直接在网上下载安装包

解压完nginx的安装包之后,把dist文件放在html文件夹里,然后双击启动nginx.exe,然后打开浏览器访问【http://localhost/dist】就可以了,可以同时部署无限个项目的,如果有购买外网云虚拟机,去云虚拟机上安装一个nginx,也是放进去直接把打包文件夹放进去,然后开启nginx服务,访问【http://外网ip或域名/打包文件夹名字

到这里,所有的开发都进行完了,如果想要配置二级域名,可以查看nginx分类

题外话SSR
vue还有一个ssr的东西,就是说vue第一次加载会把整个项目加载下来,一般都是几个m,太慢,所以要做一点加速留住用户,然后就提出了ssr,首屏服务器渲染技术,个人认为这好不容易前后端分离了,又强行服务器渲染,没必要浪费时间去研究
插件有两个,一个是VUE-SSR,一个是Nuxt

原文地址:https://www.cnblogs.com/pengdt/p/12046424.html

时间: 2024-11-10 23:59:42

vue打包部署(含2.0)的相关文章

Vue项目webpack打包部署到服务器

Vue项目webpack打包部署到服务器 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.[js](http://lib.csdn.net/base/javascript "JavaScript知识库"),我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'变为了./,然后我就执行了npm run buil

vue项目打包部署生产环境

vue项目打包部署生产环境 打包部署生产环境之前需要修改配置文件: 修改一:build > utils.js  (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 修改二:config > index.js (修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题) 两个文件修改完成之后,运行命令:npm run build 打包直接访问dist文件夹中的index.html即可. 原文地址:https:

vue项目打包部署-----解决打包后访问资源失败问题

vue项目打包部署-----解决打包后访问资源失败问题. 本文链接:https://blog.csdn.net/kaola_l/article/details/80497490 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了解决js找

nodejs+express搭建服务器及vue项目部署打包

一.Express 1.Node.js 详情及安装https://www.cnblogs.com/LiuFqiang/p/11991468.html 2.Express Express是一个保持最小规模的灵活的Node.js web应用程序开发框架,为web和移动应用程序提供一组强大的功能 安装: npm install express --save -g 3.express-generator 是express项目的生成器,此工具的作用是生成express项目 安装 npm install e

vue一键打包部署

摘录自: https://blog.csdn.net/weixin_43087487/article/details/90371869 在根目录创建一个publish.js文件 发布的时候 只要输入 node publish.js publish test就可以了 // 一键打包部署 module.exports = function () { let O = 'xxx', // 文件名 Q = require('q'), del = require('del'), gulp = require

实习初步认识_1:部署renren-fast v2.0遇到的问题及解决方案

部署renren-fast v2.0可参考官方文档https://www.renren.io/guide/#fornt(注意红色部分) 部署后台时一切正常,一下是官方文档内容: 2.1.后端部署 环境要求 JDK1.8 . MySQL5.5+ 通过 git ,下载renren-fast源码,如下: git clone https://git.oschina.net/renrenio/renren-fast.git 用 idea 打开项目, File -> Open 如下图: 用 eclipse

Vue 项目部署到GitHub Pages并同步到Gitee Pages

前言:相信很多前端开发者都拥有自己的vue项目,若想把自己的项目做成网站分享给大家看,最常用的就是利用Github提供的GitHub Pages服务和Gitee提供的Gitee Pages服务.其中,Github是国外网站,Gitee是国内网站(访问速度较快).本文给大家介绍的是如何将 vue-cli 3.0+项目部署到github pages 并同步到 gitee Pages上. 一.服务说明与注意事项 在你的github项目设置的GitHub Pages项,有这么一句话: GitHub Pa

Spring boot(4)-应用打包部署

摘自: http://blog.csdn.net/hguisu/article/details/51072683 1.Spring Boot内置web spring Boot 其默认是集成web容器的,启动方式由像普通Java程序一样,main函数入口启动.其内置Tomcat容器或Jetty容器,具体由配置来决定(默认Tomcat).当然你也可以将项目打包成war包,放到独立的web容器中(Tomcat.weblogic等等),当然在此之前你要对程序入口做简单调整. 对server的几个常用的配

VS2010 C/S模式 打包部署

先说说什么是打包部署和发布,对于c/s模式打包就是把我们的程序打成压缩包,打包将行李入包,发布是将打好的包展开.  这样的好处一是保护版权和安装方面,二是打包会把cs文件编译成为dll文件,第一次运行的速度快,同时保护代码.三是打包发布可以节省控件,基本解决了安全性的问题,使得程序员的原codes不被泄漏. 说说打包和发布的区别,发布是没有安装文件的,要求服务器上必须安装上一个frontpage server extension,发布是把页面文件aspx,资源文件放到网站里,代码编译到程序集中放