Vue项目如何打包并部署(nginx)

这个名字还中

已于 2022-04-13 17:32:07 修改

阅读量2.6w

点赞数 15

CC 4.0 BY-SA版权

分类专栏：前端 nginx 文章标签： nginx vue

于 2022-04-08 16:27:33 首次发布

本文链接：https://blog.csdn.net/weixin_51296247/article/details/124044201

前端同时被 2 个专栏收录

4 篇文章

订阅专栏

nginx

4 篇文章

订阅专栏

本文详细介绍了Vue项目的打包过程，包括在vue.config.js中的配置，如publicPath、outputDir等，并解决了跨域问题。同时，讲解了如何修改路由模式以及打包后的文件路径。接着，文章阐述了Nginx的部署配置，如在nginx.conf中的location设置，以实现项目在服务器上的运行。最后，提供了访问打包后项目的URL示例。

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

使用场景:

我们常使用前后端分离项目时,会需要将前端vue打包然后部署。

一.打包

vue项目其实可以直接通过一下语句进行打包：

npm run build

默认打包情况如下:

当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置:

1.首先在项目根目录下创建vue.config.js文件

配置内容如下所示(附带跨域问题解决):

module.exports = {
    //打包
    publicPath: './',
    outputDir: 'test', //打包输出目录
    assetsDir: './static', //放置生成的静态资源
    filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
    lintOnSave: false, //设置是否在开发环境下每次保存代码时都启用 eslint验证
    productionSourceMap: false,// 打包时不生成.map文件
    
    // 解决跨域配置
    devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
        port: 8080,
        proxy: {                 //设置代理，必须填
            '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:9090',     //代理的目标地址(后端设置的端口号)
                changeOrigin: true,              //是否设置同源，输入是的
                pathRewrite: {                   //路径重写
                    '/api': ''                     //选择忽略拦截器里面的单词
                }
                /*也就是在前端使用/api可以直接替换为(http://localhost:9090)*/
            }
        }
    },
}

2.查看路由中(router/index.js)是否使用history,是的话修改为hash。或者将mode直接注掉，因为默认使用hash。

const router = new VueRouter({
  /*mode: 'history',*/
  mode: 'hash',
  routes:[]
})

export default router

然后再次使用npm run build进行打包就会出现test文件夹,已经其中静态文件会放置到static中。

到此打包已经结束。

3.找到打包后文件的路径

双击打包好的index.html文件,就可以看到是首页了。

二.部署(nginx)

首先需要安装nignx,这个毋庸置疑这里就不介绍。(或者后续会在nginx板块放置具体安装步骤)

直接在nginx.conf中进行配置即可:

server {
    listen   8021;
    server_name  localhost;

    location /test{
        alias    /home/hyq/vue_file;
        index  index.shtml index.html index.htm;
    }

配置具体含义见:Nginx配置信息_憨憨要秃头的博客-CSDN博客

然后启动或者重启nginx即可。

访问:服务器地址:8021/test 即可。