vue3+express部署到nginx

---

评论 2 条

• 

  1843880570 2024-04-19 09:21:09

  Vue3 项目的创建
  使用 Vue CLI 可以很方便的生成 Vue3 的项目模板，俗称“脚手架”：

  vue create hello-world
  1
  执行命令，出现选项提示：

  Vue CLI v5.0.1
  ? Please pick a preset: (Use arrow keys)
  ❯ Default ([Vue 3] babel, eslint)
    Default ([Vue 2] babel, eslint)
    Manually select features
  1
  2
  3
  4
  5
  可以使用键盘方向键选择 Vue 版本，这里使用默认 Vue3，回车开始创建项目。

  🎉  Successfully created project hello-world.
  👉  Get started with the following commands:

   $ cd hello-world
   $ npm run serve
  1
  2
  3
  4
  5
  出现如上信息，表示项目创建成功。

  hello-world 是项目名称，会使用该名称生成相应的项目文件夹，内部包含多个项目文件：

  hello-world/

      README.md
      babel.config.js
      jsconfig.json
      node_modules
      package-lock.json
      package.json
      public
      src
      vue.config.js
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  Vue Cl
  项目文件结构说明可以参考：VueJS 3 – Project Structure。

  Vue3 项目的开发调试
  使用 Vue CLI 创建的项目会自带有一个简单示例，进入项目文件夹：

  cd hello-world
  1
  执行命令：

  npm run serve
  1
  会启动一个开发服务器运行项目：

   DONE  Compiled successfully in 4049ms                                                                                                                                          下午12:51:35

  
    App running at:
    - Local:   http://localhost:8080/
    - Network: http://192.168.0.110:8080/

    Note that the development build is not optimized.
    To create a production build, run npm run build.
  1
  2
  3
  4
  5
  6
  7
  8
  9
  使用浏览器访问 http://localhost:8080/，就可以看到示例页面。

  有时候我们可能会看到不一样的运行命令，比如：npm run dev，这是为什么？

  实际上，命令 npm run 的组成格式应为：

  npm run [script]
  1
  script 可以理解为脚本名称，serve 或者 dev 只是脚本名称，npm run 本质是执行脚本名称对应的脚本。

  脚本名称和对应的脚本被定义在项目的 package.json 文件中：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
  1
  2
  3
  4
  5
  可以看出，npm run serve 实际执行的脚本命令是 vue-cli-service serve：

  vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
  1
  开发服务器
  项目开发时运行项目
  模块热重载
  项目开发过程中，大部分时候不需要手动重启开发服务器；项目变动时，开发服务器会自动完成重新加载，页面也会自动刷新。
  vue-cli-service 是 Vue Cli 的命令，可以参考：vue-cli-service serve。

  Vue3 项目如何区分开发/测试/生产环境
  Vue Cli 支持 模式和环境变量，不同的模式对应着不同的环境变量。默认情况下，内置以下三种模式：

  development
  开发模式，使用命令 vue-cli-service serve 时默认使用开发模式；
  test
  测试模式，使用命令 vue-cli-service test:unit 时默认使用测试模式；
  production
  生产模式，使用命令 vue-cli-service build 或 vue-cli-service test:e2e 时默认使用生产模式；
  使用上述命令时，如果需要使用其它的模式，可以通过参数 --mode 指定。

  每一种模式都对应着一组环境变量，运行命令时会自动从相应模式的 环境文件 中加载，环境文件名称格式要求：

  .env.[mode]
  1
  其中，mode 为模式名称。环境文件需要放置在项目根目录中。

  .env 用于配置通用的环境变量。
  模式名称支持自定义。

  环境变量支持以下三种：

  NODE_ENV
  BASE_URL
  以 VUE_APP_ 开头的变量
  NODE_ENV 对应用的构建运行有较大影响（参考官网），它的值取决于模式，对于内置的三种模式：

  模式：development，NODE_ENV：development
  模式：test，NODE_ENV：test
  模式：production，NODE_ENV：production
  其它模式，NODE_ENV 的值来源于模式的环境文件；如果环境文件中没有配置 NODE_ENV 的值，则 NODE_ENV 为 development。

  在代码中使用环境变量：

  process.env.NODE_ENV
  process.env.BASE_URL
  process.env.VUE_APP_SECRET
  1
  2
  3
  Vue3 项目如何构建部署
  项目构建
  Vue3 项目部署之前，需要先将项目构建成可以部署的应用程序，在项目根目录内执行命令：

  npm run build
  1
  出现以下提示信息：

   DONE  Compiled successfully in 7008ms                                                                                                                                           下午5:08:48

    File                                 Size                                                                     Gzipped

    dist/js/chunk-vendors.07827a19.js    72.69 KiB                                                                27.19 KiB
    dist/js/app.eae9c148.js              13.10 KiB                                                                8.44 KiB
    dist/css/app.2cf79ad6.css            0.33 KiB                                                                 0.23 KiB

    Images and other types of assets omitted.
    Build at: 2022-03-07T09:08:48.312Z - Hash: ce50ca3dd72b5756 - Time: 7008ms

   DONE  Build complete. The dist directory is ready to be deployed.
   INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  表示项目构建完成。构建完成的应用程序位于项目根目录的 dist 文件夹内：

  dist/
      css
      favicon.ico
      index.html
      js
  1
  2
  3
  4
  5
  项目部署
  构建完成的应用程序可以部署至 Web 服务器中，这里以 Nginx 为例。

  创建部署目录（/tmp/hello-world），将 dist 文件夹内的所有文件全部拷贝至部署目录：

  mkdir -p /tmp/hello-world

  cp -R ./dist /tmp/hello-world
  1
  2
  3
  配置 Nginx：

  location / {
      root /Users/yurun/workspace/meetu/website/dist;
      index index.html;
      try_files $uri $uri/ /index.html;
  }
  1
  2
  3
  4
  5
  root

  应用程序的部署目录。

  index

  应用程序的默认请求页。对于构建完成单页面应用程序而言，仅有一个 index.html 页面文件。

  try_files

  Vue3 官方推荐使用路由库 Vue Router，它支持多种路由模式，推荐使用 HTML5 模式。使用这种模式需要注意一个问题：

  假设应用内存在一个路由：/activity：如前文所述，应用部署目录内仅包含一个 index.html 文件；如果使用浏览器直接访问 http://localhost/activity，因为应用部署目录内并不存在名称为 activity 的页面文件，因此会提示 404。
  1
  类似这种情况，我们需要让 Nginx 内部将请求重定向至 /index.html，它内部的路由策略知道如何处理 /activity 请求。

  重启 Nginx：

  nginx -s reload
  1
  应用部署完成。

  赞同 0 反对 0

  回复

  ---
• 

  prtyaa 2024-04-25 02:25:58

  根据您提供的信息，问题出现在前端页面中，使用Vue3和Express部署到Nginx后，某些数据无法显示。

  初步分析可能的原因是数据源的问题，您已经在前端代码中打印了数据并且能够正常显示。但是在同一个数据源下，绿色内容却无法展示。

  以下是我给出的一些可能的解决方案：

  1. 核对数据源：确保绿色内容所使用的数据源与其他正常显示的内容使用的数据源一致。可以在前端代码中使用console.log输出数据源，然后核对是否与其他部分一致。

  2. 检查数据格式：检查绿色内容所使用的数据是否符合前端页面的展示要求。确保数据格式正确，包括数据类型、数据结构等。

  3. 检查样式代码：绿色内容无法显示可能与样式代码有关。检查前端页面中与绿色内容相关的样式代码，确保没有覆盖、隐藏或修改绿色内容的样式。

  4. 检查容器大小：如果绿色内容是被包含在一个容器中的，检查容器的大小是否足够容纳绿色内容。如果容器的宽度或高度不够，可能导致绿色内容无法正常显示。

  5. 检查接口数据：如果绿色内容所使用的数据来自于后端接口，确保接口返回的数据是正确的。可以在浏览器的开发者工具中查看接口返回的数据是否正常。

  6. 检查网络请求：如果绿色内容所使用的数据是通过网络请求获取的，检查网络请求是否成功并且返回了正确的数据。可以使用浏览器的开发者工具查看网络请求的状态和返回值。

  7. 排查其他问题：如果以上方面都没有问题，可能还有其他导致绿色内容无法显示的原因，可以继续排查其他可能性，如前后端交互问题、前端框架的限制等。

  **总结：**根据您提供的信息，解决以上问题可以通过核对数据源、检查数据格式、样式代码、容器大小、接口数据、网络请求等方面进行排查。如果以上解决方案都没有解决问题，请提供更多细节或相关代码以便更好地帮助您解决问题。

  赞同 0 反对 0

  回复

  ---

  丫哈哈哈哈哈哈哈各个环节