vue-cli 3.0以上打包部署过程
作者:互联网
找到package.json
在对应的vue的项目目录下面新建vue.config.js
写入下面的配置
module.exports = {
publicPath: '/h5/dist/', //代表部署的域名访问的目录
outputDir: 'dist',//打包后在当前目录下生成打包后的dist文件,把dist文件放置到对应的域名/h5/下面即可
assetsDir: 'static',
lintOnSave: false,
productionSourceMap: false //去除打包后js的map文件
}
cd mytest
执行:npm run build 进行打包
然后把dist文件放到对应的项目服务器的对应目录下面,下面以 域名+/h5/dist/为例
https://test.okall.com.cn/h5/dist/#/ 既可以运行
如何解决刷新页面404的问题,在路由下面配置路由的模式为hash
const router = new VueRouter({
routes,
mode: “hash”,
base: process.env.BASE_URL
})
再次打包部署既可以解决
在路由下面配置路由的模式为history时
const router = new VueRouter({
routes,
mode: “history”,
base: process.env.BASE_URL
})
再次打包部署,此时需要后台服务器配置nginx
#H5/h6
location /h5/h6/ {
try_files $uri $uri/ @h6;
alias /u02/h5/h6/;
autoindex on;
allow all;
}
location @h6 {
rewrite ^.*$ /h5/h6/index.html last;
}
标签:下面,vue,dist,cli,h6,h5,路由,3.0,打包 来源: https://blog.csdn.net/weixin_43878003/article/details/117327484