① Vue多页面应用配置
最近由于工作驱动，项目包含pc端及mobile端，pc端和mobile端核心功能一致，最大的不同是UI,为了减少维护的成本，决定使用Vue的多页面开发。
项目线上部署在一个子目录下，为了解决在本地和线上路径保持一致，需要修改一些配置。所以以此篇文章来记录一下配置过程中的问题。
这里是我放在github上的项目，里面有整个配置文件。感兴趣的朋友可以参考一下： vue-multiple-page
此篇文章记录了先在根路径下的多页面配置，再从根路径修改成子路径的配置
vue脚手架vue-cli3及以上；
在本地用vue-cli新建一个项目；
vue3.js :路由配置修改的是 history: createWebHistory('/mobile/')
vue3.js :路由配置修改的是 history: createWebHistory('/e/')
mobile端mobile.js的base修改成 base: '/e/mobile'
vue3.js :路由配置修改的是 history: createWebHistory('/e/mobile')
特别注意的地方
② vue cli4.0 配置环境变量
------------------正文开始------------------
开发项目时，经常会需要在不同环境中切换。那么我们如何配置不同的环境变量呢？
为了更加方便消化本文章，建议先看下官方文档：
环境变量和模式
看完官方的文档如果还没有明白，可以参考本文。
在vue-cli 构建的项目中，默认有3种模式，如下图：
我个人的理解就是：
你执行npm run serve时，对应的环境就是开发环境；
你执行npm run build时，对应的环境就是生产环境。
如果你开发的项目中，不止该3种，该咋整呢？像在我开发的项目中，就有本地环境(local)、开发环境(development)、测试环境(devtest)、预发布环境(beta)、生产环境(proction)。请记住我括号里面的英文。
来，左边跟我一起画个龙，在你右边儿画一道彩虹 画完了，开始进入主题了
------------------进入主题------------------
如官方文档所说，通过为.env文件增加后缀来设置某个模式下特有的环境变量。我这里有5个环境，所以配置了5个.env文件。如下图：
基本格式如下：
<pre>NODE_ENV=环境名称
VUE_APP_URL=对应的环境地址</pre>
如我本地环境的配置就如下图所示：
我本地是用的easy-mock模拟的数据，所以配置的地址是mock接口地址。
如官方文档所说，可以通过传递 --mode 来配置不同的模式。我自己的项目配置如下图：
请注意我配置文件中的 serve 与 build 。
文件已创建好，配置语句也已写好。怎么用它呢？
首页你需要哪个环境，就执行哪个环境的命令语句。
比如我现在需要local环境，就执行 npm run local-serve 。如下图所示：
然后通过 process.env.NODE_ENV 获取环境名；通过 process.env.VUE_APP_URL 获取环境对应的url。
比如我们在axios请求中，就可以把它的baseURL设置为 process.env.VUE_APP_URL ，如下图所示：
后面的"/web"是根据我自己接口来的，你别也写个"/web"。
如果你不确定你自己现在是在哪个环境变量下，可以 console.log("当前环境变量："+process.env.NODE_ENV) 和 console.log("当前环境路径："+process.env.VUE_APP_URL) 看下。
像我的项目中就是下面这2个东东：
输出的内容就是.env.local文件里面配置的环境变量。
为了更好的理解，我们再执行一条语句， npm run serve ,看看此时的环境变量是哪个？
为什么呢？
因为 npm run serve 默认指向.env.developement，我在里面配置的环境就是上面输出的内容。.env.developement的配置如下图：
总而言之就是，你需要哪个环境变量，就 【npm run 对应的环境变量】 就完事了！
③ vue.js-2.0路由怎么用路由怎么配置
方法/步骤
首先，先来讲个小东西吧。我个人一般在开发的时候都会将ESLint关闭掉。在新建一个项目的时候，会提示你安装否。选择n就行了。也就是no。见下图！如果你不心安装了。也没事。在项目的配置文件中找到它注释掉即可。
首先第一步，在components文件夹里新建两个.vue文件。将用它们来路由页面。并且分别取名router1.router2
接下来，我们就开始配置路由了。首先说几个准备思路吧。第一：页面打开后是要有默认显示页的（默认的路由），第二，同时实现路由切换时像JStab切换效果。接下来，我们要在app.vue里写好2个导航命名为router1和router2。分别用来将router2,router1路由进来。（在这之前请把hello.vue的内容清空，才能看到现面第二张图的效果）
现在基本的准备工作已经做好了。现在看到min.js文件。我个人的习惯是喜欢把路由的配置写在这里或者引入到这里。不习惯放在router文件夹下面的index.js。请看下图片。首先将。原始的router引入的改成VueRouter。然后引入之前新建好的两个.vue文件。记得要use一下。最后创建一个router实例。第一个path / 表示的意思是默认路由进来的组件。也就是router1.
到了这里就差最后一步了。回到app.vue。写上路由。分别给router1,router2加上路由标签。router-link标签渲染时会自动增加一个A标签带href路转。后面的to='',就是将要路由到哪里去的min.js中的path路径。to="/"表示此处将路由显示出min.js路由配置中path为/的component。最后，router-view标签是将路由过来的组件渲染在什么地方。这里写在了导航下面。效果请看第二，第三张图片。第二张图片就是默认进来的路由页面。也就是router1.地址栏中的路径就是首页。第三张图地址栏中路径变了，而且内容也变了。说明路由成功。
最后给路由的导航加上像JS一样的tab切换效果。用到VUE路由中自有的类。router-link-active.意思是在路由激活时更变的class.看图。在style中写好css.页面上就可以看到默认显示的路由组件导航就有class了。不过此时，你已经成功了一半了。因为请看下面第三张图片。当点击router2的时候，出现了两个红色字体。这下尴尬了。
上面有小问题，将会在下一篇分享“嵌套路由－子路由”中给大家解决。如果有性子比较急的请私信我。或者看我简介联系我。喜欢记得投票收藏哦。后续会分享更多关于vue.js组件化开发框架的应用。谢谢大家。
④ vue的多页面配置
如何使用项目
项目改造过程
可以通过/sign,/test访问页面 7. 上面这种模式打包上线的时候需要后台的配置，(比如打包后的文件都在build文件夹下),nginx配置如下
server {
listen 3088;
server_name localhost;
#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
root /usr/share/nginx/html/build;
index index.html index.htm;
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
location /sign {
try_files $uri $uri/ /sign.html;
}
location /test {
try_files $uri $uri/ /test.html;
}
}
上面的配置就能直接访问www.host:3388/sign,www.host:3388/test,这样整体的多页面配置就完成了。
通过node启动一个服务器来渲染多个html页面
⑤ vue项目环境变量配置的实现方法
问题
实际开发中，开发环境和生产环境中一些变量是不同的，比如接口地址等等，打包之前需要手动切换。
编译时
新建env.js
let
baseUrl
=
'';
if(process.env.NODE_ENV
==
'proction'){
baseUrl
=
'https://xxxxxxxxx';
}
else
if
(process.env.NODE_ENV
==
'development')
{
baseUrl
=
'/api'
}
export
{
baseUrl
}
process.env.NODE_ENV
是通过webpack
内置的
DefinePlugin
为所有的依赖定义的变量
webpack.dev.conf.js
new
webpack.DefinePlugin({
'process.env.NODE_ENV':
'development'
}),
webpack.prod.conf.js
new
webpack.DefinePlugin({
'process.env.NODE_ENV':
'proction'
}),
这样在项目任意文件中都能调用process.env.NODE_ENV变量，本人测试过，process并不是挂载在window变量上，猜测可能是挂载到了node的process变量。
在运行脚本编译项目的时候，会根据变量值的不同，设置不同的baseUrl。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue-cli配置环境变量的方法
⑥ Vue多环境配置--切换生产环境、测试环境和开发环境
情况二：使用cli3.x或者4.x没有build和config文件夹
1、根目录下新建文件：.env.development（开发环境）、.env.test（测试环境）、.env.proction文件（生产环境）
2、三个配置文件的配置内容如下：
.env.development（开发环境）配置内容
.env.test（测试环境）配置内容
.env.proction文件（生产环境）配置内容
3、修改vue.config.js
mole.exports = { // 基本路径，相对路径 publicPath: "./", // 输出文件目录 outputDir: process.env.outputDir,}
4、修改package.json文件
5、判断并使用不用的开发环境配置
⑦ vue路由配置
首先，先来讲个小东西吧。我个人一般在开发的时候都会将ESLint关闭掉。在新建一个项目的时候，会提示你安装否。选择n就行了。也就是no。见下图！如果你不心安装了。也没事。在项目的配置文件中找到它注释掉即可。
首先第一步，在components文件夹里新建两个.vue文件。将用它们来路由页面。并且分别取名router1.router2
接下来，我们就开始配置路由了。首先说几个准备思路吧。第一：页面打开后是要有默认显示页的（默认的路由），第二，同时实现路由切换时像JStab切换效果。接下来，我们要在app.vue里写好2个导航命名为router1和router2。分别用来将router2,router1路由进来。（在这之前请把hello.vue的内容清空，才能看到现面第二张图的效果）
现在基本的准备工作已经做好了。现在看到min.js文件。我个人的习惯是喜欢把路由的配置写在这里或者引入到这里。不习惯放在router文件夹下面的index.js。请看下图片。首先将。原始的router引入的改成VueRouter。然后引入之前新建好的两个.vue文件。记得要use一下。最后创建一个router实例。第一个path / 表示的意思是默认路由进来的组件。也就是router1.
到了这里就差最后一步了。回到app.vue。写上路由。分别给router1,router2加上路由标签。router-link标签渲染时会自动增加一个A标签带href路转。后面的to='',就是将要路由到哪里去的min.js中的path路径。to="/"表示此处将路由显示出min.js路由配置中path为/的component。最后，router-view标签是将路由过来的组件渲染在什么地方。这里写在了导航下面。效果请看第二，第三张图片。第二张图片就是默认进来的路由页面。也就是router1.地址栏中的路径就是首页。第三张图地址栏中路径变了，而且内容也变了。说明路由成功。
最后给路由的导航加上像JS一样的tab切换效果。用到VUE路由中自有的类。router-link-active.意思是在路由激活时更变的class.看图。在style中写好css.页面上就可以看到默认显示的路由组件导航就有class了。不过此时，你已经成功了一半了。因为请看下面第三张图片。当点击router2的时候，出现了两个红色字体。这下尴尬了。
⑧ Vue项目启动过程以及配置
我们点击 npm run dev 的时候，这就是启动 Vue 工程项目，那么它启动过程是什么样的呢？ Vue 项目启动过程，本文简要介绍。
在执行 npm run dev 的时候，会在当前目录中寻找 package.json 文件，包含项目的 名称版本 、 项目依赖 等相关信息。
从下图中可以看到， 启动 npm run dev 命令后，会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。
webpack.dev.conf.js 中引入了很多模块的内容，其中就包括 config 目录下服务器环境的配置文件。
可以看到，在 index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置，默认启动端口是 8080 ，这里可以进行修改。
index.html 的内容很简单，主要是提供一个 div 给 vue 挂载。
main.js 中， 引入了 vue 、 App 和 router 模块， 创建了一个 Vue 对象，并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下， 并绑定了一个路由配置。
上面 main.js 把 App.vue 模板的内容，放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到，这个页面的内容由一个 logo 和一个待放置内容的 router-view ， router-view 的内容将由 router 配置决定。
查看 route 目录下的 index.js ，我们发现这里配置了一个路由， 在访问路径 / 的时候， 会把 HelloWorld 模板的内容放置到上面的 router-view 中。
HelloWorld 中主要是一些 Vue 介绍显示内容。
所以，页面关系组成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。
到这，我们开始安装 router 、 vuex 。
Ctrl+C 退出启动，继续执行 vue-cli ，脚手架安装插件 router 和 vuex 开始。
输入一个大写Y，按下Enter
vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
Vuex 主要有五部分：
① 安装 vuex
接下来我们在 src目录 下创建一个 vuex 文件夹
并在 vuex文件夹 下创建一个 store.js 文件
文件夹目录 长得是这个样子
在保证我们处于我们项目下，在命令行输入下面命令，然后，安装 vuex 。
② vuex 的关系图
③ 开始使用，在 mian.js 中，引入 vuex
④然后告知 vue 开始使用 vuex (Vue.use(Vuex))
在 store.js 文件中，引入 vuex 并且使用 vuex ，这里注意我的变量名是大写 Vue 和 Vuex
⑤接下来，在main.js中引入store
到这里算是，以及完成了。
我们再重新看一下此时的项目结构，多了router.js和store.js，其它相关的文件也被修改
⑨ 通俗易懂讲解vue.config.js的配置参数
贴上 官网
vue-cli3 创建的时候并不会自动创建vue.config.js，因为这个是个可选项，所以一般都是需要修改webpack的时候才会自己创建一个vue.config.js
再然后因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去知道weboack做了什么，所以没有暴露webpack的配置文件，我们可以手动去创建vue.config.js 去修改默认的webpack。注意，只能叫vue.config.js。
publicPath （从 Vue CLI 3.3 起已弃用baseUrl，请使用publicPath）
参考： https://my.oschina.net/u/4446873/blog/4882847
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.xxx.com/ 。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.xxx.com/my-app/ ，则设置 publicPath 为 /my-app/。
这个值在开发环境下同样生效。如果你想把 开发服务器架设在根路径 ，你可以使用一个条件式的值：
通常开发环境，本地运行都会直接部署在根路径上，publicPath设置为'/'，访问地址是你的IP地址。如下是设置成'/app'的效果：
从上面可以得知，静态资源文件都是在app下的，所以在dist下新增添一个app目录，把dist下文件放到app下，相当于一个文件的路径，可以发现项目会正常启动。一般nginx都会配置一个静态资源目录，打包后的文件都会放到这个静态资源目录里面，nginx去做映射，所以publicPath这个属性基本不用改。'/'就行。
结论： publicPath配置成'/aaa/bbb/ccc'， 则需在相应的服务器路径中新建aaa>bbb>ccc的文件夹，然后将打包后的文件放进去，就ok啦。
项目中，我会在.env.proction文件中设置一个变量VUE_APP_BASE_URL ，项目打包后告诉相关人员 nginx 路由前缀是什么即可
outputDir
assetsDir
indexPath
filenameHashing
直观效果：当运行npm run build时，
打包后的文件后面都会带一个8位的hash值，那啥是个hash值？
在打包出来的文件名上加上文件内容的hash是目前最常见的有效使用浏览器长缓存的方法，js文件如果有内容更新，hash就会更新，浏览器请求路径变化所以更新缓存，如果js内容不变，hash不变，直接用缓存。（这段话是从别的文章里面参考的）。
将filenameHashing这个值设置为false试试，就不会带那个后缀hash值。
pages
lintOnSave
runtimeCompiler
transpileDependencies
proctionSourceMap
crossorigin （不理解）
integrity
configureWebpack
chainWebpack
Css相关配置
devServer
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
补充知识
所谓的跨域就是不同源，不满足协议、域名、端口都相同的约定
http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 协议不同(https)
http://www.test.com:90/index.html 不同源 端口不同(90)
http://www.demo.com/index.html 不同源 域名不同(demo)
当协议、域名、端口中任意一个不相同时，就是不同源。若不同源之间相互请求资源，就算作跨域
补充知识
反向代理（Reverse Proxy）方式是指以代理服务器来接受网络上的连接请求，然后将请求转发给内部网络上的服务器，并将服务器上得到的结果返回给请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。客户端无需做任何配置。
修改config/index.js /vue.config.js文件（改完之后千万记得要重新 npm run dev）
host 将他的值修改为 0.0.0.0，代表可以访问本机所有的IP地址，让vue项目可通过localhost和IP同时访问。
port 设置端口号
open 是否在第一次编译时是自动打开浏览器
hot 开启为true，启动热重载，自动刷新页面
https
inline
overlay
targe 代理的服务器，也就是api要访问的服务器。
changeOrigin 允许跨域， 为false时，请求头中host仍然是浏览器发送过来的host;如果设置成true：发送请求头中host会设置成target的值
ws 是否代理websocket
pathRewrite 重写 url 的 path 部分
此文记录下来，方便自己遗忘的时候能够快速查阅，如有错误请指出。
参考链接：
https://www.jianshu.com/p/b358a91bdf2d
https://www.jb51.net/article/174200.htm
https://blog.csdn.net/liu_yunzhao/article/details/90520028
这篇文章讲的也很详细 https://blog.csdn.net/guozhangqiang/article/details/87197870
⑩ 现在想让Vue在调试时候,对Vue环境配置应该如何设置。如何改变Vue环境的端口
一般是在webpack当中配置。
可以直接搜索你当前的端口号，找到相应的文件，进行修改后重新启动，就可以看到端口号的改变了。