Vue项目从搭建到部署_vue从部署-CSDN博客

1. 安装Node.js

2. 安装淘宝镜像CNPM

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

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

3. 安装vue-cli

vue-cli可以帮助我们快速生成页面开发脚手架。

npm install -g vue-cli

会在用户这个目录生成如下脚本工具：

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"
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     };