1. 首先vue项目打包(我使用的是vscode工具)

这是我新建的一个项目工程:
在这里插入图片描述

新建或修改原有工程中的vue.config.js文件,增加或修改以下内容:
主要是publicPath 与outputDir 两项配置,若项目中有baseUrl,替换为publicPath (baseUrl, vue cli 3.3 已弃用)

    module.exports = {
    // 基本路径
    publicPath: './',
    // 输出文件目录
    outputDir: 'dist',
    // webpack-dev-server 相关配置
    devServer: {
    port: 8888
    }
    }

修改完成之后就可以进行打包了
在控制台终端输入npm run build
在这里插入图片描述
打包完成之后项目中会生成一个dist文件夹,直接访问里面的index.html就可以
在这里插入图片描述

2. 将dist文件夹拷贝到Nginx根目录下

在这里插入图片描述

3. 修改Nginx的配置

  • 修改Nginx的代理端口号listen配置,如8100, 修改项目的存放地址location的root配置为 dist
  • 配置完成后,去启动你的nginx,然后访问就可以了。
    在这里插入图片描述
Logo

前往低代码交流专区

更多推荐