Vue项目从搭建到部署

最新推荐文章于 2025-12-15 09:58:44 发布

原创最新推荐文章于 2025-12-15 09:58:44 发布 · 6.7k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

Frontend 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何从安装Node.js和CNPM，到使用Vue CLI生成webpack模板项目，再到运行、打包Vue测试项目的过程。通过CLI2版本创建项目，并配置了ESLint、vue-router，还涉及了项目部署中使用pm2进行进程管理的步骤。

1. 安装Node.js

2. 安装淘宝镜像CNPM

使用npm下载依赖包是从国外服务器下载，可能会比较慢，可以安装淘宝的cnpm工具，它保持了与官方镜像包的同步，使用cnpm安装依赖包速度会快很多。

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 安装vue-cli

vue-cli可以帮助我们快速生成页面开发脚手架，cli2和cli3版本的区别可看：

http://www.360doc.com/content/18/0809/12/35331283_776842375.shtml。

npm install -g vue-cli -> cli版本2

npm install -g @vue/cli -> cli版本3

文后使用的是cli2版本，如果安装cli3版本，如果也要vue-init创建项目，还需安装一个全局工具：npm install -g @vue/cli-init

cli3安装如下：

cli2会在用户这个目录生成如下脚本工具(cli3只有vue，而没有vue-init和vue-list)：

4. 生成webpack模板项目

-- Project name : 项目名称，注意名称不能存在大写字母！

-- Runtime ..... : 仅运行时，默认就行。

下一步：

-- Install vue-router: 是否安装官方的vue-router，输入"y"

下一步：

-- Use ESLint to lint your code ? 选择"Standard ....."，ESLint是代码风格管理工具，用来统一代码风格的，方便多人协作。

下一步：

单元测试，这里我选择"Karma and Mocha"

下一步：

下一步，完成配置，开始初始化项目目录：

完成后，目录结构如下：

目录说明：

-- build ：使用npm run *** 执行的文件

-- config: 配置文件，build执行文件的配置信息

-- src: 资源文件，存放所有组件及所用到的图片， App.vue应用组件，我们编写的所有组件都在其上运行。

-- main.js : webpack的入口文件，如下可以看到：

-- package.json: npm管理的项目的文件，里面的内容不允许有注释。

5. 运行、打包vue测试项目

开发测试：npm run dev

打包：npm run build

打包后生成dist目录，最后的信息也说明了，生成的index.html文件如果在本地直接打开，是看不到页面的，需要把这个目录放到http服务器，如nginx等。

6. 部署

这里部署使用pm2，没有直接放到nginx服务器，pm2是一个用来管理node进程的进程管理工具，支持查看node进程的状态、性能监控、负载均衡等。安装：npm install -g pm2

编写启动脚本：

app.js:

var port = 3298;

var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');
var mine = require('./mine').types;
var connect = require('connect');
var history = require('connect-history-api-fallback');

function access(request, response, next) {
    var pathname = url.parse(request.url).pathname;
    if (pathname.indexOf("undefined")) {
        pathname = pathname.split("undefined").join("");
    }
    if (pathname=="/") {
        pathname = "/index.html";
    }

    var realPath = path.join("./", pathname);
    var ext = path.extname(realPath);
    ext = ext ? ext.slice(1) : 'unknown';

    fs.exists(realPath, function(exists) {
        if (!exists) {
            response.writeHead(404, {
                'Content-Type': 'text/plain'
            });
            response.write("Request URL " + pathname + " not found on this server.");
            response.end();
        }
        else {
            fs.readFile(realPath, "binary", function(err, file){
                if (err) {
                    response.writeHead(500, {
                        'Content-Type': 'text/plain'
                    });
                    response.end(err);
                }
                else {
                    var contentType = mine[ext] || "text/plain";
                    response.writeHead(200, {
                        'Content-Type': contentType
                    })
                    response.write(file, "binary");
                    response.end();
                }
            });
        }
    });
}

var app = connect().use(history()).use(access);
http.Server(app).listen(port);
console.log("vue-test serve at port :" + port + '......');

mine.js:

exports.types = {
    "css": "text/css",
    "gif": "image/gif",
    "html": "text/html",
    "ico": "image/x-icon",
    "jpeg": "image/jpeg",
    "jpg": "image/jpeg",
    "js": "text/javascript",
    "json": "application/json",
    "pdf": "application/pdf",
    "png": "image/png",
    "svg": "image/svg+xml",
    "swf": "application/x-shockwave-flash",
    "tiff": "image/tiff",
    "txt": "text/plain",
    "wav": "audio/x-wav",
    "wma": "audio/x-ms-wma",
    "wmv": "video/x-ms-wmv",
    "xml": "text/xml",
    "woff": "application/x-woff",
    "woff2": "application/x-woff2",
    "tff": "application/x-font-truetype",
    "otf": "application/x-font-opentype",
    "eot": "application/vnd.ms-fontobject"
};

启动： pm2 start app.js