nginx 引用vue打包的静态文件_使用vue-cli3.x正确打包项目的,解决静态资源与路由加载无效的问题...

使用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

})

配置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

打包后的目录结构