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

使用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:documentsstudyVuejsepadmindist;#打包后的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记得使用命令重载配置

nginx -s reload

以上都配置完成后 运行打包项目命令

npm run build

打包后的目录结构

浏览器输入 http://localhost:8888 即可正常访问到打包后的资源