其他分享
首页 > 其他分享> > vue-cli 3.0以上打包部署过程

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