vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目...

最新推荐文章于 2024-10-29 18:34:30 发布

转载最新推荐文章于 2024-10-29 18:34:30 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/roseAT/p/11145913.html

文章标签：

#javascript #运维 #后端 #ViewUI

本文详细介绍了如何使用 Vue CLI 3 正确打包项目，并通过 Nginx 运行打包后的内容。包括 vue.config.js 的配置、router.js 中 history 模式的启用及 Nginx 的具体配置方法。

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

使用vue-cli3.x正确打包项目,配合nginx运行打包后的内容

vue.config.js

module.exports = {
    publicPath: './',//打包后的位置(如果不设置这个静态资源会报404)
    outputDir: 'dist',//打包后的目录名称
    assetsDir: 'static'//静态资源目录名称
}

router.js

export default new Router({
    mode: 'history',//配合nginx本地才能正常的使用history模式
    base: process.env.BASE_URL
})

官方文档对history模式的解释与配置方法

配置nginx(小白入门配置教程)

nginx.conf

server {
        listen       8888;//监听端口
        server_name  localhost;

        location / {
       try_files $uri $uri/ /index.html; #加上这句即可使用history模式进行路由

            root    D:\documents\study\Vuejs\epadmin\dist;#打包后的dist根目录
            autoindex on;       #开启nginx目录浏览功能
            autoindex_exact_size off;   #文件大小从KB开始显示
            charset utf-8;          #显示中文
            add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
            add_header 'Access-Control-Allow-Headers' 'x_hztz_token,*';
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

tips: 配置完nginx记得使用命令重载配置