vue项目打包部署linux_Vue前端项目打包，并部署Vue项目到Linux云服务器上

一. vue前端项目打包

使用vscode开发项目

在config目录下的prod.env.js文件当中配置我们后端服务器的IP地址和端口号，因为这是在实际的部署当中所以必须要在生成环境下进行项目的部署。

如图所示：

prod.env.js

在config目录下的index.js文件当中要改assetsPublicPath: ‘./’ 否则不能正确载入静态文件

build: {

// Template for index.html

index: path.resolve(__dirname, '../dist/index.html'),

// Paths

assetsRoot: path.resolve(__dirname, '../dist'),

assetsSubDirectory: 'static',

assetsPublicPath: './',

}

终端输入

npm run build

运行此命令行后会自动生成一个dist文件夹，这就是打包后生成的项目文件。之后将此文件夹放到服务器上，路径要与nginx配置路径一致。

dist

二. Linux服务器上安装nginx并且进行相关配置

1. 安装必要软件

1.1 使用xshell连接终端

xshell

1.2 使用xftp传输文件