正文

Vue CLI 3打包部署全攻略：从本地到线上，轻松实现项目部署

/0 浏览量
0810

在开发Vue.js应用时，Vue CLI（Vue.js命令行工具）是一个非常强大的工具，它可以帮助我们快速搭建项目、编译项目以及打包部署。本文将详细介绍如何使用Vue CLI 3进行项目的打包和部署，从本地开发环境到线上服务器的全过程。

一、项目搭建

首先，确保你的开发环境已经安装了Node.js和npm。然后，通过以下命令全局安装Vue CLI：

npm install -g @vue/cli

安装完成后，你可以通过以下命令创建一个新的Vue项目：

vue create my-project

选择合适的配置选项，然后进入项目目录：

cd my-project

二、项目配置

在项目根目录下，你可以找到一个名为vue.config.js的文件，这是Vue CLI的配置文件。在这里，你可以自定义项目的构建行为，例如修改输出文件名、启用gzip压缩、设置代理等。

以下是一个简单的vue.config.js配置示例：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV !== 'production',
  productionSourceMap: false,
  devServer: {
    port: 8080,
    host: '0.0.0.0',
    https: false,
    hotOnly: false,
    proxy: null // 设置代理
  }
};

三、项目打包

在项目根目录下，执行以下命令进行打包：

npm run build

这将会在dist目录下生成一个优化后的生产环境版本的项目。

四、部署到线上

4.1 准备服务器

确保你的服务器已经安装了Node.js和npm。然后，将打包后的dist目录上传到服务器。

4.2 静态文件服务器

为了使静态文件能够被正确访问，你可能需要配置一个静态文件服务器。以下是一个简单的Nginx配置示例：

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

4.3 配置环境变量

在服务器上，你可能需要配置一些环境变量，例如API接口地址等。你可以在项目的.env文件中添加以下内容：

VUE_APP_API_BASE_URL=https://api.example.com

4.4 部署项目

上传项目文件到服务器后，进入项目目录，然后执行以下命令启动项目：

npm install
npm run dev

这将会启动一个开发服务器，你可以通过访问http://localhost:8080来查看项目。

五、总结

通过以上步骤，你就可以将Vue CLI 3项目从本地开发环境部署到线上服务器了。当然，这只是一个基本的部署流程，实际部署过程中可能需要根据你的项目需求进行调整。希望本文能帮助你更好地理解Vue CLI 3的打包和部署过程。

-- 展开阅读全文 --