Vue的node环境的搭建（脚手架、页面模块、公用页面模块、自定义全局函数方法、反向代理、指针等）

最新推荐文章于 2024-08-01 10:19:08 发布

原创最新推荐文章于 2024-08-01 10:19:08 发布 · 541 阅读

3 ·

CC 4.0 BY-SA版权

js/大前端专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍如何使用Node服务创建Vue框架环境，包括配置路由、URL访问、公共JS及全局函数，部署生产环境及反向代理，适用于前端开发人员。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搭建vue环境，无非有以下目标（目录层次清楚了，项目架构和功能也就清楚了，前后端都是根据这个目标来）：

1）创建一个基于node服务的vue框架环境，vue中webpack的使用；

2）配置路由和url访问：①配置单独模块页面；②配置公共模块页面；

3）配置公共js（区别：assets目录将会打包进入dist，而static不会，所以此处js应放入assets文件夹）；

3-1）配置全局公共函数，并访问该函数

4）部署生产环境；

5）利用反向代理部署node服务器（这个本文简单涉及）。

# 创建一个基于node服务的vue框架环境

需要提前安装好node环境（下载地址为：https://nodejs.org/en/）；

全局安装vue-cli脚手架：

# npm install --global vue-cli

安装vue项目：

# vue init webpack myvue

Vue build ==> 打包方式，回车即可；

　　　　Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到所以Y 回车；

　　　　Use ESLint to lint your code ==> 是否需要 js 语法检测，选不需要检测n；

　　　　Set up unit tests ==> 是否安装单元测试工具目前我们不需要所以 n 回车；

　　　　Setup e2e tests with Nightwatch ==> 是否需要端到端测试工具目前我们不需要所以 n 回车；

# cd myvue

启动项目服务（开发环境）

# npm run dev

生成生产环境，myvue根目标生成dist文件夹，此文件夹就是打包以后的静态压缩项目资源，可以直接将dist文件部署到服务器而不再需要node编译：

# npm run build

# 配置路由和url访问：①配置单独模块页面；②配置公共模块页面；

新建目录和文件：

1. 如图新建pages单独模块放置的目录和文件；

2. 新建common公共模块的目录和文件；

在src/router/index.js里面配置注册页面和路由，全部代码如下：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);

/*
* 引入公共js
* */
import {all} from '../assets/js/all.js'

/*
* 注册模块页面路由
* */
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/pages/home/home'
import Test from '@/components/pages/test/test'

/*
* 注册url访问路由
* http://localhost:8081/#/index
* */
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/index', // url访问地址
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/test',
      name: 'test',
      component: Test
    },

  ]
})

注册公共模块，将common目录下的公共模块文件引入单独模块home里面：

<template>
    <div class="home">
      <!--公共组件-->
      <com_head></com_head>
      <!--开始内容-->
      <div>

        home-{{msg}}

      </div>
      <!--结束-内容-->
      <!--公共组件-->
      <com_foot></com_foot>
    </div>
</template>

<script>

    /*
    * 注册公共模块
    * */
    import Foot from '@/components/common/foot'
    import Head from '@/components/common/head'

    export default {
      name: "home",
      data(){
        return {
          msg: "home模块"
        }
      },
      methods: {

      },
      components: { // 注册公共组件
        com_foot: Foot,
        com_head: Head,
      },

    }
</script>

<style scoped>
  .home{
    color: red;
    font-size: 20px;
  }
</style>

如图：

# 配置公共js（区别：assets目录将会打包进入dist，而static不会，所以此处js应放入assets文件夹）

在assets文件夹新建如下：

all.js：

console.log("all");

export class all {


}

# 配置全局公共函数，并访问该函数

main.js里面定义函数访问接口，$符号为约定俗成，统一加：

Vue.prototype.$appName = function (name) {  // 注意，用了Vue对象，引用等指针也应该是Vue
  return name;
};

然后在子模块home.vue里面引用$appName。注意this指针指的最少是vue这个对象，不然会报错 $appName为定义。如果指针不正确，可以和如下一样，定义一个全局vue指针对象all_this，初始化以后全局调用vue的指针。

    let all_this; // 定义一个全局指针，负责全局prototype

    export default {
      name: "home",
      data() {
        return {
          msg: "home模块"
        }
      },
      methods: {},
      
      beforeCreate: function () {
        all_this = this; // 初始化指针

        console.log(this.$appName("22222=="));
        run();
      },
      created() {
        all_this = this; // 初始化指针

        console.log(all_this.$appName("33333=="));
      }
    }

    function run() {
      console.log(all_this.$appName("22222----"))
    }

# 部署生产环境

运行

npm run build

创建dist文件，将dist文件部署在生产环境即可，不管是本地打包再上传到服务器还是在服务器打包，都可以。

dist/index.html文件默认js资源文件是根目录，如果你的域名不在更目录，请手动更换index.html里面的默认js资源文件路径。

如图：

路由访问，静态资源访问，公共模块，公共js，都成功！

# 反向代理：

一般是服务端环境有比如Apache+node环境，需要在Apache中设置反向代理比如8080端口来实现前端系统的访问。

你可参考教程https://github.com/fyonecon/quweiceshi

如下说明：

1.使用说明

在apache中配置httpd.conf，接口代理绑定8080端口并绑定域名，注意，域名绑定的是静态dist目录
Listen 80

加载转发模块 LoadModule proxy_module modules/mod_proxy.so

LoadModule proxy_http_module modules/mod_proxy_http.so

<VirtualHost 39.108.245.11:80>

 ServerName quwei.hhhh.com

 DocumentRoot "/usr/local/apache/htdocs/www/quwei/web/dist"

<Directory "/usr/local/apache/htdocs/www/quwei/web/dist">
    Options Indexes FollowSymLinks ExecCGI Includes
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>
ProxyPass / http://localhost:8080/ ProxyPassReverse / http://localhost:8080/

2.访问即可

demo项目代码下载：

https://github.com/fyonecon/myvue

后记：

vue的目录设置似乎没有Angular2设置的清晰，因为vue不是使用的ts才流行起来的吧。

对于模块化的单页应用，我自己写了个开源MVVM前端框架view https://blog.youkuaiyun.com/weixin_41827162/article/details/86598265，更简单更清晰！