Vue中的项目打包及部署全流程

目录
  • 一、打包
    • 遇到的第一个问题
    • 问题二:文件找不到
  • 二、服务器部署
    • 1、解压
    • 2、用法
    • 3、Vue项目build后
    • 4、配置nginx
    • 正式开始将项目推送到自己服务器上
    • CentOS操作系统的部署

一、打包

npm run build 打包项目后,出现dist文件夹,dist文件夹下的东西就是需要部署的项目。

遇到的第一个问题

index.html页面出现一片空白,右键检查network发现一堆错误。

解决:没有修改config配置文件,如果直接打包,系统默认的是’/’(根目录),而不是’./’(当前目录),从而导致路径不对,页面加载不出来。

需要自己在项目的根目录下手动建一个配置文件并添上以下代码:然后在重新打包一次就可以了。

module.exports = {
publicPath: ‘./'
}

当然我是这么弄得看得高大尚一点:

module.exports = {
  // 基本路径 baseURL已经过时
  publicPath: './',
  // 输出文件目录
  outputDir: 'dist',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  // compiler: false,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},
  // vue-loader 配置项
  // https://vue-loader.vuejs.org/en/options.html
  // vueLoader: {},
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: true,
  // css相关配置
  css: {
   // 是否使用css分离插件 ExtractTextPlugin
   extract: true,
   // 开启 CSS source maps?
   sourceMap: false,
   // css预设器配置项
   loaderOptions: {},
   // 启用 CSS modules for all css / pre-processor files.
   modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require('os').cpus().length > 1,
  // 是否启用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  // dll: false,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相关配置
  // devServer: {
  //  open: process.platform === 'darwin',
  //  disableHostCheck: true,
  //  host: 'www.test.com',//如果是真机测试,就使用这个IP
  //  port: 1234,
  //  https: false,
  //  hotOnly: false,
  //  before: app => {}
  // },
  // 第三方插件配置
  pluginOptions: {
   // ...
  }
  }

问题二:文件找不到

vue-router总共有三种模式。

对于我解决办法:将router中的index.js 中的mode: "history"注释掉,然后再重新打包即可。

其实到这一步就完成了,可气的是:我打开index.html发现主页有一些图文没有加载出来,查看发现:

PS:对于Vue项目build后有一件事折腾了我好久。

我疯狂百度这个问题:“打包之后http请求怎么都变成了file请求? ”,弄懂之后发现自己悟性好菜(领悟了大概得1个小时),感觉原地社死…

解读:打包后本地就是file请求,这样没错,只有部署到服务器上,那些请求的图文才会正常显示,所以要相信自己!

不过,还有不少人也遇到这种不是问题的问题,截图:

注:已经回答:本地打包后需要部署到服务器才正常的,因为现在打包是在文件夹下(File),所以file请求没有问题!!

可以参考下面本地window10下进行nginx部署进行检测。

二、服务器部署

下载(可以下载win版本适应一下):

http://nginx.org/en/download.html

1、解压

双击nginx.exe启动

打开cmd命令窗口,切换到nginx解压目录下,输入命令 nginx.exe 或者 start nginx

2、用法

  • 命令环境(配置)
  • nginx -s stop 停止 不保存信息
  • nginx -s quit 停止 保存信息
  • nginx -s reload 重启
  • nginx -v 查看版本
  • 查看是否成功,默认80端口
  • start nginx 启动

3、Vue项目build后

将dist文件下的代码+文件复制到http里面,然后再打开发现项目运行正常!如果Http跨域错误请看第四步,正常请略过。

4、配置nginx

(目前nginx还只是静态服务器而已,有些是需要跨域的)

\conf下nginx.conf中

server {
listen 80;
server_name localhost;
    location / {
        root   html;
        index  index.html index.htm;
    }
    #正向代理
    location /api{
        proxy_pass http://239.3454(写你的后端请求)
    }
}

其中location下的 html;如果是将dist文件复制进去,那么location下的 html改为 html/dist

正式开始将项目推送到自己服务器上

1、查看服务器是属于centos还是Ubuntu

2、yum install -y redhat-lsb(有的话就不需要安装)lsb_release -a (查看)

CentOS操作系统的部署

1、安装yum类似npm,下载模块以及模块的依赖(安装nginx之前的依赖)

yum -y install pcre*
yum -y install openssl*

2、下载wget类似于迅雷下载文件

yum install wget

3、下载nginx

下载到对应目录(一般是在usr下的local下)

wget http://nginx.org/download/nginx-1.17.9.tar.gz

4、解压

tar -zxvf nginx-17.9

5、编译安装

./ configure

表示成功!

最后输入: make -j4 && make install

会产生一个nginx文件所有的操作都在这个里面

6、进入nginx文件里面sbin

测试是否安装成功 ./nginx -t

./nginx启动

报错

解决:

lsof -i :80查看被什么程序占用,使用killall -9 nginx 杀掉进程。

7、部署项目

使用MobaXterm上传打包好的Vue项目到sbin文件下

使用 (unzip 名字)解压

PS:zip -q -r 压缩包名.zip进行压缩 到html文件夹下

最后cd进入nginx文件下的sbin输入./nginx -s reload

大功告成!!!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2022-08-10

详解Vue项目的打包方式

目录 一.相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包 总结 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'sta

Vue项目打包并发布的完整步骤记录

目录 1.安装部署Nginx服务器.(类似Tomcat服务器) 2.Vue项目打包. 总结 如何将Vue项目打包并发布?我这边是测试发布到本地,不过步骤是一样的,步骤如下: 1.安装部署Nginx服务器.(类似Tomcat服务器) 说明:Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.同时,也是一种轻量级的Web服务器,可以作为独立的服务器部署网站. (1)官方下载网址:http://nginx.org/ (2)下载之后,得到

vue项目打包发布上线的方法步骤

目录 一.开发环境到生产环境的转变 二.设置统一的请求路径 三.运行打包命令 vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-cli脚手架生成的项目为例) 一.开发环境到生产环境的转变 项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发路径切换为线上路径. 打开项目中config文件夹里面的 dev.env.js 文件,将后端给的线上路径填入. 'use strict' module.exports = { NODE_E

Vue项目打包部署的实战过程记录

目录 前言 一.准备工作--服务器和nginx使用 1. 准备一台服务器 2. nginx安装和启动 3. 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件 二.Vue项目打包同步文件到远程服务器 1. 打包 2. 同步到远程服务器 3. 同步ssh key 三.非域名根路径发布 1. nginx配置 2. 项目配置 3. 绝对路径引用的静态资源找不到的问题 四.history模式部署 1. 项目配置 2. nginx配置 3. history模式部署到非域名根路径下

Vue项目打包部署到iis服务器的配置方法

一 将Vue项目打包 切换到项目目录下,输入cnpm run build 打包 等待打包完成 二 URL 重写 访问我们的一个url 原因是vue不是根据项目目录的地址访问的,是根据vue-router转发路由访问url,在这里我们应该进行url rewrite url write的方式有两种,一种是在iis下载url rewrite工具配置规则 另一种是配置web.config文件,我用的是第二种 web.config内容 <?xml version="1.0" encodin

vue项目打包部署_nginx代理访问方法详解

我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了

vue项目打包部署到服务器的方法示例

上上一篇我写过一些关于vue项目部署到linux服务器的文章,但是那是以node作为开发环境 pm2 守护进程的方式,让他能正常运行,可是还是出现了问题,因为属于与APP交互的页面,在webView中打开过慢,APP的用户体验非常的差,所以我查找了资料,改变了部署方式,接下来我介绍一下 这一次,我想Tomcat为例 我们先看一下Linux中 Tomcat下面的目录结构: 以vue-cli 搭建出来的手脚架 webpack的模板下的/config/index.js,这里可以看到assetsPubl

详解vue项目打包后通过百度的BAE发布到网上的流程

经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己

vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀

需求说明: 在开发 vue 项目的过程中遇到的需求是要把 api 接口前缀暴露在命令行,通过 npm run build apiUrl 即可修改接口入口,用于从 docker 部署到不同的测试服务器上,其次是路由模式的问题,部署到测试服务器上的需要是 history 模式,但是产品是用 electron + vue 开发的桌面应用,electron 硬性要求 vue-router 的路由模式是 hash 模式,所以命令行需新增一个配置项 mode ,mode 可选值有 history .hash

angular2+node.js express打包部署的实战

Angular2我自己还在摸索学习中,本文介绍了angular2+node.js express打包部署的实战,分享给大家,也给自己留个笔记 angular是客户端js,Node.js 是服务端JS,建立SPA 网站需要把这两者统一到一起. 1.angular2项目创建,使用angular-cli ng new mypos 2.使用express命令行工具创建express项目. express --view=hbs 3.angular2 中 需要引用到第三方库 例如 jQuery,bootst

webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改,改为 目的是将资源文件的引入路径,改为相对地址(相对index.html) 二.此时html中的js.css.img引入均没有问题,但是css中的background-image还是报404 此

解决vue项目打包后提示图片文件路径错误的问题

vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build

Vue项目打包压缩的实现(让页面更快响应)

影响网页响应速度的因素有很多,例如:http请求次数太多.服务器本身处理请求太久.请求内容太大.JS脚本执行耗时过长.浏览器回流重绘等.网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站.对于Vue项目而言,最普遍的问题可能在于打包后的文件太大,导致加载时间过长. 我的一个小项目,仅有三四个页面,但因为服务器带宽太小了,加载时间过长的问题尤为明显,于是采用路由懒加载和gzip压缩的方式优化了一下,访问速度得到了显著提升. 一.路由懒加载:分割代码块 Vue支持异步组件,

解决vue项目nginx部署到非根目录下刷新空白的问题

1.修改config/index.js 2.修改路由route/index 3.后台配置nginx 以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.