vue-cli3.0 如何设置配置文件,打包后可以直接修改配置项更换请求地址或定义的其它变量,无需再次打包

vue-cli3.0 如何设置配置文件,打包后可以直接修改配置项更换请求地址或定义的其它变量,无需再次打包

1个回答

wsl3465205046
wsl394049743 在index.html 设置变量使用localStorage进行存储可行,但存在风险,想找个较好的方法
11 个月之前 回复
wsl3465205046
wsl394049743 .env文件设置变量一样的,打包后进行修改变量,还是打包前的路径地址,你看的那个连接内容几种方法都试了。
11 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

vue-cli3.0使用prerender-spa-plugin插件预渲染时 publicpath的配置问题

按照网上搜寻到的办法 配置预渲染 : **vue.config.js**: ``` // 这三项一定要有,因为下面configureWebpack中用到了 const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); module.exports = { // 预渲染关键配置 configureWebpack: () => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径,也可以与webpakc打包的一致。 // 下面这句话非常重要!!! // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname, 'dist'), // 对应自己的路由文件,如果有参数需要写具体参数,比如/a/:id需要写/a/123456 routes: ['/', '/about'], // 这个很重要,如果没有配置这段,也不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }) ] }; } }; ``` 修改成自己的: 1.添加 ``` publicPath: process.env.NODE_ENV === 'production' ? '/fish/' : '/', outputDir: 'fish', ``` 2.修改: ``` staticDir: path.join(__dirname, 'fish'), ``` 最终修改后**vue.config.js**: ``` // 这三项一定要有,因为下面configureWebpack中用到了 const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/fish/' : '/', outputDir: 'fish', // 预渲染关键配置 configureWebpack: () => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径,也可以与webpakc打包的一致。 // 下面这句话非常重要!!! // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname, 'fish'), // 对应自己的路由文件,如果有参数需要写具体参数,比如/a/:id需要写/a/123456 routes: ['/', '/about'], // 这个很重要,如果没有配置这段,也不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }) ] }; } }; ``` 3.问题出现: 配置了publicPath后,进行打包编译时就会一直卡住不动,编译时弹出的浏览器一直白屏 控制台报两行看不懂的错: ![图片说明](https://img-ask.csdn.net/upload/201909/29/1569727333_173612.png) 求教如何正确配置 publicPath

vue-cli配合webpack搭建多页面应用,测试、打包没报错,但打开打包生成html文件就报错。

如标题所示:vue-cli配合webpack搭建多页面应用,测试、打包没报错,但打开打包生成html文件就报错。望大神指点指点。 ![图片说明](https://img-ask.csdn.net/upload/201804/15/1523795530_349133.png) csdn.net/upload/201804/15/1523795495_611472.png) ![图片说明](https://img-ask.csdn.net/upload/201804/15/1523795509_693963.png)

vue-cli3 打包后,二级页面刷新后空白,发现请求的 about.js 文件变换成了 about,直接去掉了后缀

这个问题很奇怪 路由:http://127.0.0.1:5500/,正常我打包后运行,第一次进入index页面,刷新后没问题 路由:http://127.0.0.1:5500/about,第一次进入about页面也没问题,但是我刷新后 显示 Cannot GET /about,然后我对比发现,第一次请求的是:http://127.0.0.1:5500/about.js,正常的 刷新后请求的是:http://127.0.0.1:5500/about, 它不应该是 http://127.0.0.1:5500/about.js吗,为什么只去掉了.js 配置如下,其实我也没配置啥: ``` vue.config.js module.exports = { publicPath: './', devServer: { port: 8086, proxy: 'http://localhost:8086' } } ``` ``` export default new Router({ mode: "history", // base: process.env.publicPath, base: './', routes: [ { path: "/", name: "home", component: Home }, { path: "/about", name: "about", component: () => import("@/views/About.vue") } ] }); ``` 各位大神多踩踩啊

vue cli 3.0 文件压缩如何去掉console.log?

期望vue 打包之后,项目里面调试信息console.log 可以自动去掉。 我在vue.config.js 文件的配置项增加了这一部分 ``` configureWebpack:{ optimization: { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_console: true,//console drop_debugger: false, pure_funcs: ['console.log']//移除console } } }) ] } } ```

为什么我全局安装vue-cli的时候总是报错呢?

用了很多安装命令都安装不上, npm install vue-cli -g npm install -g vue-cli 很多..... 报的错都一样 ![图片说明](https://img-ask.csdn.net/upload/201906/02/1559480690_333242.png) ![图片说明](https://img-ask.csdn.net/upload/201906/02/1559480708_336731.png)

vue-cli 项目发布到Tomcat下,读取不到静态资源

由于tomcat下的ROOT文件夹被占用,因此vue项目需要发布到webapps下的文件夹下,暂定‘project’文件夹。 **目录结构如下:** ![图片说明](https://img-ask.csdn.net/upload/201901/24/1548323650_455375.jpg) **配置如下:** config/index.js ![图片说明](https://img-ask.csdn.net/upload/201901/24/1548323568_390689.jpg) **build/utils.js** ![图片说明](https://img-ask.csdn.net/upload/201901/24/1548323722_767369.jpg) **build/webpack.base.conf.js** ![图片说明](https://img-ask.csdn.net/upload/201901/24/1548323797_104255.jpg) **执行:npm run build 之后生成的目录结构dist/project:** ![图片说明](https://img-ask.csdn.net/upload/201901/24/1548323921_208901.jpg) **将project文件夹放在tomcat的webapps下,启动tomcat后,访问 http://ip:8080/project,页面可以加载出来,但是图片都加载不出来,** ![图片说明](https://img-ask.csdn.net/upload/201901/24/1548324080_389948.jpg) **这个路径是ROOT目录下的文件,怎么修改为读取project/static/images下的文件啊。。。。。 请问这个问题怎么解决啊。。。愁好几天了**

求大神帮忙解决:vue-cli3 axios请求本地数据问题

引入axios ``` import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$axios = axios ``` vue.config.js ``` module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: false, hotOnly: false, proxy: { // 配置跨域 '/api': { target: 'http://localhost:8080', ws: true, changOrigin: true, pathRewrite: { '^/api': '' } } }, before: app => {} } }; ``` json目录 ![图片说明](https://img-ask.csdn.net/upload/201908/22/1566447518_763675.png) axios请求 ``` getData() { this.$axios('api/data/profile/shopping.json') .then( res => { console.log(res.data) }) } ``` 错误提示 ![图片说明](https://img-ask.csdn.net/upload/201908/22/1566447555_906674.png)

vue-router在hash模式下打包部署后通过url访问报404

希望实现的效果: http://localhost/ (访问到系统首页) http://localhost/share (直接访问到一个独立的单页面) 使用vue-router的vue-cli3的项目,使用HbuilderX开发,开发环境下已经实现我想要的效果。 下面是部分代码 ``` router配置文件router.js ...引用部分省略.. //路由定义 const routes = [ { path: '/share', name: 'share', component: share }, { path: '/web', name: 'web', component: iContainer, children: [..] }, { path: '/mobile', name: 'mobile', component: mHome, children: [..] } ] const router = new VueRouter({ mode: 'hash', routes }) export default router ``` 根据url后缀决定是进入独立的share页面还是进入普通首页 ``` app.vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> ...引用部分省略.. export default { name: 'app', data: function() { return { pathName: window.document.location.pathname } }, created() { if (this.pathName == "/share") { this.$router.push('/share') } else { /** 判断是否手机端,进入对应入口 **/ if (this.$utils._isMobile()) { this.$router.push('/mobile') } else { this.$router.push('/web') } } } methods: {} } </script> ``` 打包后将dist文件夹内容拷贝到tomcat,使用tomcat启动,首页能够正常访问。但是只要使用share访问就会报404。请问是什么原因导致?为什么在开发环境下正常,但是打包后部署就404?该如何解决达到我想要的效果? 网上搜了一天了,查到的都是说history下直接输入url会404,为什么我hash模式下也是404? ============================================ 自己后面又仔细想了下,发现是生成链接那里有问题。 首先按照猜想测试了下http://localhost/#/share,果然就能加载页面,所以就修改了生成链接部分的代码,让它在地址后面上下文前面加上#就解决问题了。应该是这样的话就能保证访问的页面是/这个我们的唯一入口。然后就能进入我们想要的路由了!

vue-cli创建的项目中没有build文件夹,该如何配置使用模拟数据

最近在开发一个小项目,所以用vue init webpack-simple来创建的vue项目,目录很简洁,但是在最近要用模拟数据时发现没有build文件夹,也找不到webpack.dev.conf.js这个配置文件,那么应该怎么来使用mock模拟数据啊,求大佬指教,在网上查了很久都找不到方法。

vue项目打包后页面空白

vue项目打包后在本地运行,用http-server ,浏览器打开后页面空白,也没有报错,几个路径也都更改过了。 ![图片说明](https://img-ask.csdn.net/upload/201904/13/1555162065_976363.png) ![图片说明](https://img-ask.csdn.net/upload/201904/13/1555162081_634016.png) ![图片说明](https://img-ask.csdn.net/upload/201904/13/1555162087_87731.png) ![图片说明](https://img-ask.csdn.net/upload/201904/13/1555162095_458997.png) 求助?????

vue项目中已经引入babel-polyfill在ie9中还是报错

vue项目中已经引入babel-polyfill在ie9中还是报错polyfill-eventsource added missing EventSource to window

vue项目打包,用nginx部署了,但是访问不到页面

![图片说明](https://img-ask.csdn.net/upload/202006/12/1591937532_236247.png) 如上图,我本地这个路径都能访问到页面,为什么部署后却找不到页面了 ![图片说明](https://img-ask.csdn.net/upload/202006/12/1591937546_187970.png) 这是我路由的index.js文件 有没有人知道,求给个方向或者告诉我原因。小白跪谢T-T

2019 Python开发者日-培训

2019 Python开发者日-培训

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

设计模式(JAVA语言实现)--20种设计模式附带源码

设计模式(JAVA语言实现)--20种设计模式附带源码

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

java后台+微信小程序 实现完整的点餐系统

java后台+微信小程序 实现完整的点餐系统

三个项目玩转深度学习(附1G源码)

三个项目玩转深度学习(附1G源码)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

2019 AI开发者大会

2019 AI开发者大会

玩转Linux:常用命令实例指南

玩转Linux:常用命令实例指南

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Git 实用技巧

Git 实用技巧

Python数据清洗实战入门

Python数据清洗实战入门

使用TensorFlow+keras快速构建图像分类模型

使用TensorFlow+keras快速构建图像分类模型

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

程序员的算法通关课:知己知彼(第一季)

程序员的算法通关课:知己知彼(第一季)

MySQL数据库从入门到实战应用

MySQL数据库从入门到实战应用

机器学习初学者必会的案例精讲

机器学习初学者必会的案例精讲

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

.net core快速开发框架

.net core快速开发框架

玩转Python-Python3基础入门

玩转Python-Python3基础入门

Python数据挖掘简易入门

Python数据挖掘简易入门

微信公众平台开发入门

微信公众平台开发入门

程序员的兼职技能课

程序员的兼职技能课

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

HoloLens2开发入门教程

HoloLens2开发入门教程

微信小程序开发实战

微信小程序开发实战

Java8零基础入门视频教程

Java8零基础入门视频教程

Python可以这样学(第一季:Python内功修炼)

Python可以这样学(第一季:Python内功修炼)

C++语言基础视频教程

C++语言基础视频教程

Python可以这样学(第四季:数据分析与科学计算可视化)

Python可以这样学(第四季:数据分析与科学计算可视化)

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

Python数据分析与挖掘

Python数据分析与挖掘

微信小程序开发实战之番茄时钟开发

微信小程序开发实战之番茄时钟开发

软件测试2小时入门

软件测试2小时入门

相关热词 c#跨线程停止timer c#批量写入sql数据库 c# 自动安装浏览器 c#语言基础考试题 c# 偏移量打印是什么 c# 绘制曲线图 c#框体中的退出函数 c# 按钮透明背景 c# idl 混编出错 c#在位置0处没有任何行
立即提问