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:\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記得使用命令重載配置

nginx -s reload

以上都配置完成后 運行打包項目命令

npm run build

打包后的目錄結構

瀏覽器輸入 http://localhost:8888 即可正常訪問到打包后的資源