都说是使用vue 脚手架自然用的是vue-cli npm install vue-cli -g 建立项目 vue init webpack demo //vue初始化 使用webpack 项目名称 这时候再输入命令 npm run build 进行发布 此时会生成dist目录,这就是生成出来的 然后直接:npm run dev 运行 部署可以选择新建一个目录, 安装express: npm install express; 还需要安装一个命令工具: npm install -g express-

环境: 后端,python+uwsgi启动 前端:vue  用nginx运行,指定静态目录 问题 :发布后带路径打开页面报404问题,带路径打开即不是打开的主页 解决方案: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90 nginx配置加上 location / {     try_files $uri $ur

在vue.config.js中添加下面的代码即可 // vue-cli version > 3 modeule.exports = { configureWebpack: config => { if (process.env.NODE_ENV === "production") { config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true; } }, }

问题:ngnix将8080转成80对外访问,找不对woff2等文件 一\ 搭建环境 ngnix-->conf中 server { listen 80; server_name 10.9.240.9; location / { proxy_pass http://localhost:8080; } } 二\解决办法 https://github.com/vuejs/vue-cli/issues/179 style-loder 无法自己设置publicpath, 所以只能在ExtractTextPl

修改nginx配置文件 location / { root ... index ... try_files $uri $uri/ /index.html; ---解决页面刷新404问题 } (参考官网 https://router.vuejs.org/zh-cn/essentials/history-mode.html)

一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了2.安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博客. 现在就有我来说说如何讲vue项目发布到github上 之前写过vue环境搭建 可以参考: vue环境搭建 二.vue项目的打包 1.大家都知道使用npm run build进行打包,这个时候你直接打开dist/下的index.html,会发现文件可以打开,但是所有的js,css,img等路径有

背景 脚手架版本号:vue cli 3.x 项目路由:vue-router的History模式 原理:url路由处理逻辑从后端转移到前端. 参考:https://developer.mozilla.org/zh-CN/docs/Web/API/History_API 安装nginx 参考:https://www.cnblogs.com/jiangwangxiang/p/8481661.html 1.下载nginx http://nginx.org/en/download.html        

由于工作需要,这里我先创建一个vue的工程. 1.首先安装好gitlab相关插件:GitLab.GitLab Hook.NodeJS 插件安装参考:https://www.cnblogs.com/jxd283465/p/11542680.html 2.jenkins服务器安装git 和 nodejs git安装: yum -y install git nodejs安装:这里我安装的在home路径下,可自行更改. wget https://nodejs.org/dist/v9.8.0/node-v

部署Jenkins参照另一篇博客: centos7安装Jenkins及其卸载 一.jenkins相关插件的安装 1.安装Publish Over SSH插件用于SSH连接远程的服务器. 登录 jenkins 管理系统首页,打开“系统管理”--“管理插件”  搜索 Publish Over SSH 然后勾选安装 2.安装 NodeJs插件 用于vue项目打包构建. 打开“系统管理”--“管理插件”  搜索 nodejs 然后勾选安装 打开“系统管理”--“Global Tool Configura

jenkins的安装 Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建.测试和部署软件. Jenkins 支持各种运行方式,可通过系统包.Docker 或者通过一个独立的 Java 程序. 安装 这里的操作系统为WSL Ubuntu,其它系统的安装的请参考jenkins官方文档 wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add - sudo sh -c 'echo de

为什么要给 VUE 项目添加 PWA 为什么要添加?因为不管是部署在 IIS,还是 nginx,每次应用部署后,再次访问因为旧的 js 已经不存在,所以页面访问的时候会整个报错,报错的结果就是一个白屏. 为了解决这个问题,我的解决方案是使用 PWA ,这样就可以将 js 缓存到本地,再次发布后,service-worker.js 会使旧的 js 失效,重新请求并缓存 js. 如果对于问题这个有更好的解决方案,务必请大佬指定一二 安装 PWA 的相关依赖包 yarn 安装 yarn add sw-

服务器部署结构 1.服务器访问直接访问NGINX 2.静态资源访问, nginx读取本地文件夹 3.API接口路由, nginx把以api开头的访问都路由到业务逻辑服务器. nginx配置 client_max_body_size 100m; # 上传文件大小限制 server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; # 静态资源位置 (这里的dist文

vue项目如何不分离发布 1.首先yarn build 我用了vue-cli脚手架,bulid后的dist文件夹里的index.html有加版本号,那么为什么需要加版本号呢? a.回滚 b.解决浏览器缓存的问题 2.我们使用apache或者nginx帮助我们 2a.apache 这里我用的是XAMPP 1>把apache打开(我这里是点击start) 2>点击后青青草原绿 3>etc文件下的->http.conf文件(不同人电脑这个文件的路径好像不一样,自行查找) 4>打开该

使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异. 使用vue-router的browserHistory模式,配置mode: 'history', 有更好的体验. 目的: 想将项目打包后发布到apache的www下的vue子目录 先讲结论: 需要修改router/index.js中new Router 配置,加一个base: '/vue/', 它指定应用的基路径,该应用是服务于localhost/vue路径下,所以必须加base

项目完成之后,当然不能满足于在我们的开发环境下跑一跑.我们可以打包发布到服务器上,让大家一起来欣赏一下你的作品. 那么 vue 项目如何打包发布呢,新建的项目目录下通常都有一个 README.md 的文件,里面就描述了发布的步骤: 下面这个是 vue-cli 3.x 创建的项目中的 README.md 文件内容: # firstpage ## Project setup npm install ### Compiles and hot-reloads for development npm ru

一.下载安装node.js 1.Node.js 官方网站下载:https://nodejs.org/en/ 2.傻瓜式安装 双加安装包,除了根据自己的需要选择安装位置外,都默认下一步. 3.验证安装 打开cmd,分别输入node  –v和 npm  –v 都有相应的版本输出,说明安装成功. 二.配置npm 1.配置npm的全局模块安装路径和cache路径 (1)在node.js安装目录下新建两个文件夹 node_global和node_cache,然后在cmd命令下执行如下两个命令: npm c

注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue目录下,则需要做路径配置,并做history配置 一. 需要修改router.js中new Router 配置,加一个 base: '/vue/', 它指定应用的基路径,默认是根路径'/',表示该应用是服务于localhost/vue路径下,所以必须加base配置,否则应用会展示404页面,当然了用

部分摘自:http://www.cnblogs.com/wisewrong/p/6255817.html(已在本地测试) 前提:nodeJs本地已安装. 一.安装 vue-cli 1.使用nodeJs安装Vue-cli. 执行npm install --global vue-cli ,全局安装vue-cli ----因为默认是从国外服务器下,可以使用阿里巴巴在国内的镜像服务器. 产生通过config命令设置默认下载路径: npm config set registry https://regis

一.概述 vue项目可以打一个dist静态资源包,直接使用Nginx发布即可. 现在由于要上docker,需要将vue项目和nginx打成一个镜像才行. 项目结构如下: ./ ├── build │   └── build.js ├── config │   └── index.js ├── dist │   ├── index.html │   └── static ├── index.html ├── package.json ├── README.md ├── src │   └── Ap

今天在启动vue项目的时候报了这样一个错误, 如图所示:频繁出现此种情况,项目太大,导致内存溢出,排除代码问题外,可参照以下方式解决 // 全局安装increase-memory-limit npm install -g increase-memory-limit // 进入工程目录,执行: increase-memory-limit

在vscode上搭建一个vue项目---初学总结. 1.假设Vscode.nodejs等已经安装好了. 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目. 安装命令: npm install -g vue-cli 打开VScode的终端,调出命令输入框.点击终端-新建终端,输入上述命令,回车,等待安装完成. 3.安装webpack,它是打包js的工具 安装命令: npm install -g webpack 安装方法同上. 4.安装完成之后就可以开始创建vue项目,首先创