Vue.js前端部署

一、Vue打包js,css等路径问题
修改红框框出来的地方，原本是assetsPublicPath:’ / ‘，现在改成assetsPublicPath:’ ./ ’

如果有这段自动忽略

二、Vue打包背景图片路径问题
修改这个地方，背景图片才会出来

三、多环境部署配置
1.首先查看build.js文件夹下有没有这句话，如果有删掉。

2.这是一个运行跨平台设置和使用环境变量的脚本，当我们使用NODE_ENV =production, 来设置环境变量时，大多数Windows命令提示将会阻塞(报错)。

cross-env能够提供一个设置环境变量的scripts，让我能够以unix方式设置环境变量，然后在windows上也能兼容运行。
安装：cnpm install -S cross-env
安装成功后，在package.json的dependencies下看到相应内容

3.在package.json的 scripts下配置 build-prod（打包生产环境）和 build-test（打包测试环境）

4.config文件夹下分别配置 dev.env.js （本地环境）、 prod.env.js （生产环境）、test.env.js （测试环境）

5.webpack.prod.conf.js配置如下，由于我搭建vue框架的时候禁用了testing ，所以改成自己的配置字段是test。

6.webpack.base.conf.js配置如下

四、引入接口地址
1.在utils文件夹下建一个global.js，作为全局变量，引入接口地址。

2.在main.js将api挂载到vue原型上

3.在api文件夹下就可以使用我们定义的全局变量，这样网页才能前后端交互。

五、打包到服务器
配置完这些就可以了，我们运行npm run build-prod （生产环境打包），npm run build-test （测试环境打包）。在cmd输入npm run build-test 按回车，之后会出现如图画面，看到这个就证明打包成功。（npm run build-prod同理）

Vue.js前端部署相关推荐

10.Vue.js前端框架：过渡
1.过渡的作用 Vue.js 内置了一套过渡系统,该系统是 Vue.js 为 DOM 动画效果提供的一个特性.在插入.更新或者移除 DOM 时可以触发 CSS 过渡和动画,从而产生过渡效果. 2.单元 ...
3.Vue.js前端框架：条件判断与列表渲染
3.1 条件判断在视图中,经常需要控制某些DOM元素的显示或隐藏.Vue.js提供了多个指令来实现条件的判断,包括 v-if.v-else.v-else-if.v-show指令.下面分别进行介绍. ...
vue视频教程（Vue.js前端开发基础与项目实战）
适合人群: 适合网页设计与制作人员.网站建设开发人员.院校相关专业的学生.个人网站制作爱好者学习计划: 1.建议每天学习两小时 2.课堂代码可在附件中下载课程目标: 学习Vue前端框架,能使用Vu ...
Vue.js前端开发实践第一章课后作业
课后习题一.填空题 1. Vue是一套构建用户界面的渐进式框架. 2. MVVM主要包含3个部分,分别是Model. View和ViewModel. 3. Vue 中通过refs属性获取相应DOM元 ...
Vue.js前端开发实战总结（1）
什么是Vue Vue是一套用于构建用户界面的渐进式框架,与其他大型框架相比,Vue被设计为可以自底向上逐层应用. Vue的数据驱动是通过MVVM(Model-View-ViewModel)模式来实现的 ...
vue.js前端开发技术读书笔记二：vue数据绑定
文章目录 1.vue模板语法 2.响应式声明渲染机制 3.vue属性绑定 4.vue双向数据绑定 5.vue计算属性 6.计算属性与methods区别 7.vue生命周期 ❤️❤️❤️vue模板语法? ...
Vue.js - 解决部署到服务器后Element UI图标不显示问题（404错误）
1,问题描述 (1)element-ui 自带了一套常用的图标集合,使用起来十分方便.最近发现当 Vue.js 项目中使用 element-ui 图标时,如果使用 npm run dev 方式启动,图 ...
vue js前端根据所需参数生成二维码并下载
需要一个插件 qrcodejs2, 使用 npm install qrcodejs2 --save 下载该依赖包. 在vue中引入(我这边是vue2).import QRCode from 'qrco ...
vue.js环境部署
一.安装node.js 1.进入node.js中文网-链接: link下载Windows 安装包 (.msi)64位版本. 2.安装node.js. 3.进入cmd命令界面,输入 node -v 查看 ...

Vue.js前端部署

Vue.js前端部署相关推荐

最新文章

热门文章