Vue3.0部署上线

最新推荐文章于 2024-02-11 22:00:15 发布
最新推荐文章于 2024-02-11 22:00:15 发布
阅读量720 收藏 1
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/parchments/blog/3011312
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

Tips：已有服务器地址条件下

配置测试环境接口，线上服务器环境接口

（通过在项目根目录下新建.env .env.development .env.production文件来控制） 如下图

e0f01c5ef0f4c5ff67dde837d494b8eb63d.jpg

在目录里加入了3个文件
.env.development 开发环境文件
.env.production 线上环境文件

在上边3个文件中:
使用VUE_APP_URL = “接口url”
书写格式：VUE_APP_[自定义name]

c17f6639b11faf31e3db1b6d189c068f23f.jpg

 

配置打包环境

4ebfee8763ad0d9230b2cd0efe4301c16d4.jpg

 

vue.config.js（部分配置）

8378330e8d1af3bc81f57ad703595ecb5af.jpg

 

npm run build打包后

f8f266401a43ee9e9e099239d5fc5726625.jpg

放到服务器上，域名+/project/i.hvzhao访问即可

e090bbd8dd6a553435c9affc129e962a9bd.jpg

转载于:https://my.oschina.net/parchments/blog/3011312

Vue 3.0 企业级项目实战
sybh的博客
08-19 2606
Vue 3.0 + Element Plus + Spring Boot 企业级项目开发，升职加薪，快人一步。
vue-cli3.0 vue打包部署非根目录时，静态资源图片路径错误
guyue_01的博客
05-13 2189
项目中需要把应用部署在子路径下，所以就需要修改vue配置和NGINX配置 以子路径为market为例.eg.http://localhost:8000/market/ 1、第一步 修改vue.config.js文件 配置 publicPath属性 publicPath: "/market/", // 默认 / 修改为 market 修改router.js 配置base属性 export default new Router({ mode: 'history', base: process.
vue-cli 3.0以上打包部署过程
weixin_43878003的博客
05-27 550
找到package.json 在对应的vue的项目目录下面新建vue.config.js 写入下面的配置 module.exports = { publicPath: '/h5/dist/', //代表部署的域名访问的目录 outputDir: 'dist',//打包后在当前目录下生成打包后的dist文件,把dist文件放置到对应的域名/h5/下面即可 assetsDir: 'static', lintOnSave: false, productionSourceMap: false /
VUE3.0从零开始-打包发布到IIS(终)
wo4641771的博客
04-26 3563
1.在终端上 输入npm run build 2.生成dist文件夹，里面的内容就是打包压缩好的文件 3.新建web.config 文件到dist下面，把下面的内容复制进去。 <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <staticContent> <remove fileExtension=".woff"...
前端vue3一键打包发布
weixin_39559449的博客
05-12 4139
一键打包发布可以分为两种，一是本地代码，编译打包后发布至服务器，二是直接在服务器上拉去代码打包发布至指定目录中。两种各有使用场景，第一种是前端开发自己调试发布用的比较多，第二种是测试或者其他人员用的多，前端开发将代码上传至git中，测试人员可以在服务器上拉取指定分支如release_V0.1，然后打包发布用于测试。
vue项目的打包上线
真真的博客
12-13 511
打开项目目录，运行： npm run build 项目运行后，会生成一个dist目录，这个目录就是上线的内容，将这个文件给后台，放到服务器上即可 1.后台的根目录下直接放即可 2.如果放在后台的一个文件夹下，例如放在后台的project文件下，配置如下: config--index.js文件里面找到build build下面的“assetsPublicPath”:'/'替换成“asset...
vue-cli3.0开发组件发布到npm上
qq_41231694的博客
06-27 418
一、调整项目结构 首先用 vue-cli 创建一个 default 项目 当前的项目目录是这样的： 首先需要创建一个 packages 目录，用来存放组件 然后将 src 目录改为 examples 用作示例 二、修改配置 启动项目的时候，默认入口文件是 src/main.js 将 src 目录改为 examples 之后，就需要重新配置入口文件 在根目录下创建一个 vue.config.js 文件 复制代码 // vue.config.js module.exports = { // 将 exa
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
Vue CLI 3.0 是一个基于 Vue.js 的命令行工具，用于快速搭建现代前端应用。在使用 Vue CLI 3.0 进行项目打包时，可能会遇到静态资源（如图片、CSS、JavaScript 文件等）找不到路径的问题。这个问题通常出现在部署到...
Vue 3.0 项目部署过程.pdf
03-21
以上知识点围绕Vue 3.0项目的部署过程展开，涉及域名管理、Nginx配置、数据库操作、Node.js环境搭建、代码版本管理、HTTPS证书部署以及前端部署等多个方面，覆盖了从准备服务器环境到最终项目上线的全流程关键步骤。...
前端项目-零基础入门Vue3.0+TypeScript
01-06
10. **部署上线**：学习如何将项目打包并部署到服务器，以供线上访问。 在"finish-setting-the-front-end-master"这个文件夹中，你将找到项目的所有源代码和配置文件。通过阅读和实践这些代码，你可以更好地理解和...
vuecli3打包部署到nginx.md
07-25
vuecli3打包部署到nginx，跨域问题处理，vuecli3后目录的build和config文件夹都没有了，大部分合成在vue.config.js
vue-cli3项目打包后自动化部署到服务器的方法
10-14
主要介绍了vue-cli3项目打包后自动化部署到服务器的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue项目打包上线步骤
m0_50864962的博客
03-28 866
项目上线之前, 一定是先打包, 后上线!!! 打包的过程中, 会对代码进行压缩合并, 版本降级, 语法转换等… 1.异步组件配置(路由懒加载) 1.项目大了: 一上来加载所有的组件, 首屏加载就比较慢, 可以配置路由按需加载 例子 :把所有需要懒加载的组件由import search from '@/views/layout/search'改成==> const Search = () => import('@/views/search') 或者直接在routes中这样写 const rout
Vue项目从搭建环境到打包上线
祈澈菇凉
05-02 1266
1：安装node 端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载https://nodejs.org/en/，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。 2：查...
Vite+Vue3项目如何获取环境配置，并解决前端跨域问题
最新发布
哪过晓得的博客
02-11 911
通过vite-plugin-html组件，可以将配置文件中的数据，绑定到index.html中，可以实现不同环境的页面title和logo。vite命令启动项目时，指定mode参数，加载vite.config.ts文件。根目录新建.env.development和.env.production文件。在vite.config.ts中配置代理。package.json配置启动参数。
Vue3.0 项目打包，启动
早日成为鹏总
03-25 5522
1.打包 1.使用 vue ui打包（选择任务-选择build-选择运行） 2.使用命令打包（vite build），本项目使用vite进行打包 2.生成打包文件 1.项目中会出现一个dist文件 3.新建承载服务器 1. 进入D盘，安装express-generator生成器 执行 npm install express-generator -g 进行安装 2. 创建一个express项目 执行 express expressDemo （expres...
vue cli3.0项目打包部署服务器
qq_42915936的博客
12-31 3394
1.在项目根目录下创建vue.config.js 2.打开vue.config.js编辑 module.exports = { outputDir: '你的项目名', assetsDir:'static', publicPath:'', } 3.执行 npm run build 生成dist（该文件夹的名字为你vue.config.js里outputDir设置的名字一直）文件夹 ...
vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js
热门推荐
冲锋
08-25 4万+
vuecli3.0 创建项目步骤略过 这里我选的是 (vue-router, vuex, stylus, babel, unit-mocha, e2e-cypress) 进行测试 项目安装完成后目录 在目录里加入了3个文件 分别是本地，测试，和 开发的 环境接口 在.env文件下: 使用VUE_APP_URL = “接口url” 书写格式：VUE_APP_[z自定义nam...
【Vue3】项目打包上线部署到服务器
Jessieeeeeee的博客
01-18 2160
1、npm run build打包项目，生成dist文件夹； 2、将dist文件夹复制，粘贴到服务器中；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值