Vue3打包部署Nginx

 

1、在vue.config.js中配置如下

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
        transpileDependencies: true,
        lintOnSave: false,//关闭语法检查

        // 基本路径（下面是重点）
        publicPath: '/',
        // 输出文件目录
        outputDir: 'dist',
        configureWebpack: {
            externals: {}
        }
    }
)

2、在命令行进入本项目的目录后执行：cnpm run build

 

 

 

 

 

 3、执行完后，项目目录会出现一个默认的dist文件夹（当然这个文件夹可以修改）

 

 4、将dist整个文件夹通过ftp工具上传到服务Nginx的/usr/local/nginx/html 这个目录里

 

 5、修改nginx配置，vi nginx.conf 进入nginx配置文件中，修改运行的端口号，location里的root就是运行index.html的位置，注意下面两点：

1、try_files $uri $uri/ @router;

2、localtion @router{} 

这两个是为了防止刷新页面出现404报错

 

 6、保存后重启nginx( ./nginx -s reload) 即可（访问: http://服务器地址:8082/）