使用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: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 即可正常访问到打包后的资源