将VUE项目部署到云服务器上

第一步：在云服务器上安装nodejs

去nodejs官网下载Linux版本的tar包 http://nodejs.cn/download/current/

把tar包放到/opt/目录下解压，cd到opt目录下，

tar -xvf node-...-x64.tar.xz

填node tar包的名称

将node和npm设为全局

sudo ln /opt/node-v14.17.4-linux-x64/bin/node /usr/local/bin/node
sudo ln /opt/node-v14.17.4-linux-x64/bin/npm /usr/local/bin/npm

查看是否安装正确：

root@10-255-0-86:/# node -v
v14.17.4
root@10-255-0-86:/# npm -v
6.14.14

第二步：在云服务器中安装nginx

apt-get install nginx

等待安装完成，安装完成后，检验是否安装成功。

root@10-255-0-86:/# nginx -v
nginx version: nginx/1.10.3 (Ubuntu)

启动nginx

service nginx start

第三步：打包VUE项目

在VUE项目根目录创建文件vue.config.js

const path = require('path');
function resolve (dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: "assets",
    productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('components', resolve('src/components'))
    },
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...
            config.mode = 'production';
            config["performance"] = {//打包文件大小配置
                "maxEntrypointSize": 10000000,
                "maxAssetSize": 30000000
            }
        }
    }
}

更改router文件夹下的index.js

const router = createRouter({
    history: createWebHistory(),
    base: process.env.BASE_URL,
    routes,
})

在终端中cd到项目目录，输入

npm run build

等待后出现如下界面，则打包成功：

此时，项目目录中多了一个dist文件夹

本项目目录如下：

第四步：将打包的项目部署到云服务器

将dist目录整个拷贝到云服务器上，我拷贝的地址是：/root/vue_test/dist

拷贝完成后，开始对nginx配置

nginx默认配置文件为：/etc/nginx/sites-enabled/default和/etc/nginx/nginx.conf（/etc/nginx/nginx.conf文件引入了/etc/nginx/sites-enabled/default）在老版本的nginx中应该只有/etc/nginx/nginx.conf。

修改配置文件：

server {
	listen 9000 default_server;
	listen [::]:9000 default_server;
	root /var/www/html;
	index index.html index.htm index.nginx-debian.html;
	server_name _;
	location / {
		root /root/vue_test/dist;
		autoindex on;
		try_files $uri $uri/ /index.html;
		index index.html;
	}
}

默认端口号为80，我的80端口被占用了，于是改成了9000端口。

重启nginx服务

nginx -s reload

此时，访问云服务器ip:9000，即可访问到VUE项目的首页。