前端vue+后台管理系统怎么上线？

想要将前端Vue + 后台管理系统上线，需要以下步骤：

将前端Vue程序打包为静态文件，使用npm或yarn运行命令： npm run build或yarn build。

在你的服务器上，可以使用FTP或SCP等工具将静态文件上传到服务器。

配置服务器以在Web服务器（例如Apache或Nginx）上提供静态文件。

将后台管理系统部署到服务器上（例如Nodejs），并确保其在需要时访问Vue的静态文件。

配置Web服务器以将所有HTTP请求转发到服务器上运行的后台管理系统。

配置Web服务器以使用SSL证书（如Let’s Encrypt）启用HTTPS加密连接（推荐）。

通过这些步骤，您可以将Vue +后台管理系统部署到生产环境中并运行。

1、使用Vue-cli工具，首先需要通过Nodejs进行安装，安装完成后，进入开发目录，输入以下命令进行安装：npminstall-gvue-cli安装完成。

2、之后使用Vue-cli创建一个基础的Vuejs项目。

3、在Vuejs的开发目录下，命令行工具中输入以下命令：npmrunbuild，将会自动创建一个dist目录，其中包含了已编译好的Vuejs代码和依赖文件，只需要将该目录下的文件上传至服务器，即可将Vuejs转换为网页。

1 前言

vue-cli 一个简单的构建Vuejs项目的命令行界面

整体过程：

$ npm install -g vue-cli   $ vue init webpack vue-admin   $ cd vue-admin   $ npm install   $ npm run dev

后面分步说明。

2 安装

前提条件，Nodejs >=4x版本，建议使用6x版本。npm版本 > 3x

全局安装vue-cli

$ npm install -g vue-cli

3 使用

$ vue init <template-name> <project-name>

vue官方提供了多个打包工具版本的模版。我们可以使用vue list命令查看，当前可以使用的模版。

$ vue list

我们在这里，使用webpack模版。 功能齐全的webpack & vue-loader 提供热加载、代码检查、单元测试和css分离

$ vue init webpack vue-element-admin

之后，在E：\project文件夹下面，会有刚初始化的构建的项目vue-element-admin

4 运行结果

项目基础结构已经搭建好了，现在来启动它。

进入项目文件:

$ cd vue-element-admin

安装依赖：

中国行情原因，直接安装，有时候会失败。我们一般使用npm的淘宝镜像cnpm。

先安装cnpm：

$ npm install -g cnpm --registry=https://registrynpmtaobaoorg

之后，使用:

$ cnpm install

你直接安装也可以的：

$ npm install

运行：

$ npm run dev

启动之后，自动打开默认浏览器

之后，就可以进行本地开发，实时预览开发效果。

5 打包部署

项目开发完成之后，可以使用npm run build进行打包工作

$ npm run build

打包完成之后，会生成dist文件夹，项目上线时候，只需要将dist文件夹放到服务器就行了。

6 项目结构

　　最近的项目迭代中新增一个需求，需要在electron-vue 项目打包之后，启动exe 可执行程序的时候，动态获取配置文件中的 baseUrl 作为服务端的地址。electron 可以使用 node 的 fs 模块来读取配置文件，但是在项目打包之后项目的静态资源都会被编译成其他文件，本文来记录下相关实现和知识点。

这里需要注意 electron-builder 中两个常用的配置选项：extraResources 拷贝资源到打包后文件的 Resources 目录中，extraFiles 拷贝资源到打包目录的根路径下，这里使用extraResources ,其中 from 表示需要打包的资源文件路径，to 值为 “/” 表示根路径。

代码如下：

　　打包之后配置文件会被拷贝过来

同样，页面也能拿到对应的数据，这样就可以通过修改配置文件，动态修改连接服务端ip了。

文章来自https://wwwcnblogscom/zaishiyu/p/16358578html