精华内容
下载资源
问答
  • vue 配置多环境打包

    2020-09-23 10:57:56
    规范的大股东、 1.安装cross-env依赖在终端执行 npm install --...2.配置package.json文件,添加如下 NODE_ENV 和env_config的值将用于build文件夹 process.env 这个对象里面;比如NODE_ENV的值可以在build文件夹下的文

    1.安装cross-env依赖在终端执行 npm install --save-dev cross-env

    cross-env作为运行跨平台设置和使用环境变量的脚本,当执行build动作时通过设置、赋值环境变量告知当前构建包的是测试环境还是生产环境

    npm上对cross-env的说明

    2.配置package.json文件
    添加如下 NODE_ENV 和env_config的值将用于build文件夹 process.env 这个对象里面;比如NODE_ENV的值可以在build文件夹下的文件可以通过 process.env.NODE_ENV 来获取到值

      "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "lint": "eslint --ext .js,.vue src",
        "build": "node build/build.js",
        "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
        "build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
        "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
      },
    
    1. 配置build.js
      在这里插入图片描述
      在这里插入图片描述
      4.配置config文件,
      这个里面的process.env只能从package.json获取到 即cross-env后面的键值对
      4.1创建文件 pre.env.js
    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      EVN_CONFIG: '"dev"',
      API_ROOT: '"/api"',
      BASE_ROUTE: '""'
    })
    

    4.2创建文件 test.env.js

    'use strict'
    module.exports = {
      NODE_ENV: '"test"',
      EVN_CONFIG: '"test"',
      API_ROOT: '"/syt/api"',
      ASSETS_PUBLICPATH: '/chinabank/',
      BASE_ROUTE: '""'
    }
    

    4.3创建文件 pre.env.js

    'use strict'
    module.exports = {
      NODE_ENV: '"pre"',
      EVN_CONFIG: '"pre"',
      API_ROOT: '"/api"',
      ASSETS_PUBLICPATH: '/chinabank/',
      BASE_ROUTE: '""'
    }
    

    4.4创建文件 prod.env.js

    'use strict'
    module.exports = {
      NODE_ENV: '"production"',
      EVN_CONFIG: '"prod"',
      API_ROOT: '"/api"',
      ASSETS_PUBLICPATH: '/chinabank/',
      BASE_ROUTE: '""'
    }
    

    5.修改文件index.js
    引用文件的名称和 webpack.prod.conf.js 里面的env存在关联注意对应,修改assetsPublicPath影响打包时的本地加载路径
    在这里插入图片描述
    6.修改其他文件比如基础路由文件,以及访问后端的链接地址不同
    以下中的process.env就可以取到自己配置的那个几个文件中的值(pre.env.js, test.env.js, prod.env.js)
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vscode 开发Vue配置

    2019-03-05 04:29:59
    vscode ...vscode 插件支持 ...配置 需要插件: ESLint,Prettier - Code formatter,Vetur 需要的去上面支持里面找,都是精品 打开用户设置文件 // vscode默认启用了根据文件类型自动设置tabsize的选项 ...

    vscode

    下载地址: vscode marketplace.visualstudio.com/VSCode

    vscode 插件支持

    juejin.im/post/5c7dfa…

    配置

    需要插件: ESLint,Prettier - Code formatter,Vetur 需要的去上面支持里面找,都是精品

    打开用户设置文件

    // vscode默认启用了根据文件类型自动设置tabsize的选项
      "editor.detectIndentation": false,
      // 重新设定tabsize
      "editor.tabSize": 2,
      // #每次保存的时候自动格式化
      "editor.formatOnSave": true,
      //  #让函数(名)和后面的括号之间加个空格
      "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    
      //  #让prettier使用eslint的代码格式进行校验
      "prettier.eslintIntegration": true,
      //  #去掉代码结尾的分号
      "prettier.semi": false,
      //  #使用带引号替代双引号
      "prettier.singleQuote": true,
    
      // #每次保存的时候将代码按eslint格式进行修复
      "eslint.autoFixOnSave": true,
      // 添加 vue 支持
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "vue",
          "autoFix": true
        }
      ],
      
      // #这个按用户自身习惯选择
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      "vetur.format.defaultFormatter.less": "prettier",
      "vetur.completion.autoImport": true,
      "vetur.format.defaultFormatter.js": "vscode-typescript",
      "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_attributes": "force-aligned"
        }
      },
    复制代码

    保存代码自动按照eslint格式化,一应俱全

    断点调试 (需安装Debugger for Chrome)

    官网推荐 cn.vuejs.org/v2/cookbook…

    1. 在浏览器中展示源码 如果你使用的是 Vue CLI 2,请设置并更新 config/index.js 内的 devtool 属性:
    devtool: 'source-map',
    复制代码

    如果你使用的是 Vue CLI 3,请设置并更新 vue.config.js 内的 devtool 属性:

    module.exports = {
      configureWebpack: {
        devtool: 'source-map'
      }
    }
    复制代码
    1. 在vscode中 点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个 launch.json 的文件,选择 Chrome/Firefox: Launch 环境。然后将生成的 launch.json 的内容替换成为相应的配置:
    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "vuejs: chrome",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "breakOnLoad": true,
          "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
          }
        },
        {
          "type": "firefox",
          "request": "launch",
          "name": "vuejs: firefox",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
        }
      ]
    }
    复制代码

    转载于:https://juejin.im/post/5c7dfb10f265da2da23d4d2d

    展开全文
  • 需求:项目的开发环境、演示环境和正式环境在不同的服务器,因此需根据需要自动配置axois的服务器路径,同时也要...在main.js文件中添加 import axios from 'axios' //引入axios Vue.prototype.axios = axios; ...

    需求:项目的开发环境、演示环境和正式环境在不同的服务器,因此需根据需要自动配置axois的服务器路径,同时也要配置跨域访问

    1、项目中安装axois 

    npm install axios --save

    2、配置axois 

    在main.js文件中添加

    import axios from 'axios' //引入axios
    Vue.prototype.axios = axios;

    在vue.config.js中配置多服务器

    在vue.config.js中配置多服务器跨域

     devServer: {
            port: 8888, // 端口号
            proxy: {
                '/apis': {
                    target: 'http://192.168.50.111:8088/', // target host
                    ws: true, // proxy websockets 
                    changeOrigin: true, // needed for virtual hosted sites
                    pathRewrite: {
                        '^/apis': '' // rewrite path
                    }
                },
                '/api2s': {
                    target: 'http://192.168.50.107:8088/', // target host
                    ws: true, // proxy websockets 
                    changeOrigin: true, // needed for virtual hosted sites
                    pathRewrite: {
                        '^/api2s': '' // rewrite path
                    }
                },
                '/api3s': {
                    target: 'http://192.168.50.106:8088/', // target host
                    ws: true, // proxy websockets 
                    changeOrigin: true, // needed for virtual hosted sites
                    pathRewrite: {
                        '^/api3s': '' // rewrite path
                    }
                }}
    }}

    在src-common下新建config文件夹,文件夹下新建开发、演示和测试环境下具体的配置文件,填写具体环境的配置,将其与配置文件中的地址关联

    demo.js 演示环境

    module.exports = {
        // 演示服务器
        api: {
            host: '192.168.50.107',
            port: '8888',
            protocol: 'http',
            url: "api3s"
        }
    }

    product.js 正式环境

    module.exports = {
        //正式服务器
        api: {
            host: '192.168.50.106',
            port: 8088,
            protocol: 'http',
            url: "api3s"
        }
    }

    test.js 开发测试环境

    module.exports = {
        // 开发测试服务器
        api: {
            host: '192.168.50.111',
            port: 8088,
            protocol: 'http',
            url: "apis"
        }
    }

    index.js将服务器配置文件作为不同环境的入口文件

    /**
     * 项目配置不同的环境服务器地址的入口文件
     */
    
    let apiServer = {};
    
    switch (process.env.NODE_ENV) {
    
    
        case 'production':
            apiServer = require('./product.js')
            break;
        case 'demo':
            apiServer = require('./demo.js')
            break;
        case 'development':
            apiServer = require('./test.js')
            break;
        case 'test':
            apiServer = require('./test.js')
            break;
    }
    
    export const API_SERVER = {
        default: apiServer.api.url //配置了跨域
            /* default: `${apiServer.api.protocol}://${apiServer.api.host}:${apiServer.api.port || ''}` */
    }

    在src目录下新建http.js,引入以上配置入口文件,将配置作用到axios上

    import axios from 'axios'
    import { API_SERVER } from './common/config'
    
    //请求初始化配置
    axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
    axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
    
    
    axios.defaults.baseURL = API_SERVER.default;
    console.log("axios.defaults.baseURL" + axios.defaults.baseURL);

    在main.js文件中引入http.js文件,使配置最终生效

    axios 跨域请求具体调用方式

         /**
         * 查询某一气象类别
         * @param {json}    data     选择的节点对应的值
         */
        sch_sk(data) {
            var  p={//参数
              typeCode:data.imgSk
            }
             var url = api.commonWea.getCmaImg;//请求url
             this.axios
            .get(url, {
              params: p
            })
            .then(function(rst) {
                if(rst){
                   alert("ok");
                }
            })
            .catch(function(error) {
                alert("error");
            }); 
        }

     

    展开全文
  • vue-router配置

    2021-05-14 11:30:49
    祭出demo: vue-router配置demo 这篇文章介绍的vue-router配置是基于vue-cli脚手架初始化的项目来做的配置vue-cli脚手架初始化项目请看这里: Vue.js开发环境搭建 项目初始化完成之后,接下来看这几个步骤: 配置...

    祭出demo: vue-router配置demo

    这篇文章介绍的vue-router配置是基于vue-cli脚手架初始化的项目来做的配置,vue-cli脚手架初始化项目请看这里:

    Vue.js开发环境搭建

    项目初始化完成之后,接下来看这几个步骤:

    1. 配置main.js
    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import appVue from './App.vue'//引入app.vue组件
    import router from './router/index.js'//引入路由实例
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
     el: '#indexApp',//这里取的是html里的id=indexApp
     router:router,//这里可以写router或者router:router//router模块
     components: { appVue },
     template: '<app-vue></app-vue>'//<appVue/> 或者<app-vue/>都可以。在vue里代码块的定义使用驼峰式时,引入时可以原名字引入也可以通过在每个大写字母前加-引入。
    })
    /*
    main.js自动注入到了index.html里,同时main.js也把App.vue组件的内容引入到index.html里了,App的代码块就是<appVue/>
    * */

    在main.js里请仔细阅读我的注释,main.js是程序的入口,它关联index.html和App.vue组件并添加app-vue代码模块

    2、关注index.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>my-first-vue-project</title>
      </head>
      <body>
        <div id="indexApp"></div>
        <!-- 建立的文件将自动注入 -->
        
      </body>
    </html>

    注意这里的id="indexApp"是和main.js里的el:"#indexApp"是保持一致的。

    1. 关注App.vue
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
    name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 0px;
    }
    </style>

    <router-view/>就是匹配router中定义的路由模块,其实就是不同的代码块。

    1. 配置router
    import Vue from 'vue'
    import VueRouter from 'vue-router'//使用路由时,要引入vue-router
    
    import first from '@/components/FirstPage.vue'//引入自己的两个代码块作为自定义组件
    import second from '@/components/SecondPage.vue'
    
    // 要告诉 vue 使用 vueRouter
    Vue.use(VueRouter)
    
    export default new VueRouter({
        routes: [{
                path: '/',
                component: first,//当访问这个路径'/'时,访问的组件就是first,也就是FirstPage.vue
            },
            {
                path: '/second',
                component: second,//当访问这个路径'/second'时,访问的组件就是second,也就是SecondPage.vue
            },
        ]
    })

    到此路由配置就完成了,启动项目看到的效果如下图所示:

    first.png
    second.png

    注意事项:

    1. demo中用到的@符号是在webpack.base.conf.js定义,其实是项目的src路径
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },
    1. demo中是没有node_modules文件夹的,因为上传代码时git默认忽略这种公有库的。cd 到demo文件夹 然后执行:npm install就会加载依赖库了。最后npm run dev就可以启动项目

    祭出demo: vue-router配置demo

    vue-router官方文档

    如有错误或疑问,欢迎指正讨论。

    参考文章:使用Vue-Router 2实现路由功能vue-router 基本使用

    更新时间: 2018-07-13

    展开全文
  • 1. main.js是入口文件,主要作用是初始化vue实例并使用需要的插件。 2. App.vue是主组件,所有页面都是在App.vue下进行切换的。 3. main.js中的根实例会挂载到index.html中的<div id="app"> 4. index.html...
  • 1.安装cross-env依赖在终端执行 npm install --save-...2.配置package.json文件,添加如下NODE_ENV 和env_config的值将用于build文件夹process.env 这个对象里面;比如NODE_ENV的值可以在build文件夹下的文件可以通过...
  • vue.js手册Get this post in PDF/ePub/MOBI format at vuehandbook.com 在vuehandbook.com上以PDF / ePub / MOBI格式获取此帖子 Vue is a very popular JavaScript front-end framework, one that’s experiencing a...
  • vue环境配置和使用

    2020-11-10 09:59:00
    Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动...
  • vue router 配置路由

    2017-12-26 09:32:02
    vue-router 配置路由 用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由...
  • vue配置axios教程-定稿版(一)——api/index.js配置文件和.env文件 第一步:在api/index.js中, 配置请求拦截、响应拦截、请求头和基准路径 完整代码-src/api/index.js import axios from 'axios' // 接口错误...
  • Vue.js

    2021-05-21 13:05:49
    1.Vue.js 1.1 Vue.js 介绍 1.1.1 官方网站 https://cn.vuejs.org/v2/guide/ 作者 尤雨溪 1.1.2 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。 我们不再和 HTML 直接...
  • vue项目基础配置

    2021-08-02 16:08:01
    bash 切换到桌面 运行 vue init Webpack vue-demo 生成初始化vue项目 2.建立和码云的连接 在码云上创建一个没有readme的空项目 我后来在github重新创建并引用了码云的项目,主要维护github,然后使用码云的...
  • Vue

    2021-03-29 08:01:38
    Vue.js是一套用于构建用户界面的渐进式javascript框架。 渐进式框架:说明vue.js的轻量,是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.jsVue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 ...
  • webstrom11 vue插件配置

    2019-10-04 17:05:46
    直接上图 1. 安装vue插件 2.添加模板 3.指定模板类型 ...最新的是插件 是 vue.js ...创建完 Vue File 文件后 需要在 下面这里关联一下 转载于:https://www.cnblogs.com/juexin/p/6265114.html...
  • vue项目配置后端服务器地址 内容精选换一换更新后端云服务器,可修改字段为后端云服务器的名称和权重,可以为性能好的服务器设置更大的权重,用来接收更多的流量。如果后端云服务器关联的负载均衡器的provisioning ...
  • vue , vue-cli , webpack 的区别以及关联

    千次阅读 2020-09-01 10:43:45
    一:vuevue-cli 的区别以及...2:vue-cli 主要是从搭建交互式脚手架、零配置原型开发、基于webpack构建并进行配置、插件和Preset的扩展以及图形化的创建和Vue.js项目的用户界面管理等。 区别和关联 区别: vue
  • vue.js

    2021-05-17 14:07:39
    Vue的基本概念 vue 是当前最流行的前端接受框架(数据处理和数据绑定的工具)
  • 和安家天下静宜门店的房店长一样,都是拼命十三娘,下面我们就来讲讲webpack的另外一个业务:配置CSS文件image.png一、前期工作:loaderwebpack:大家知道,我的首要业务是打包项目中的js文件,但是生活越来越艰难,...
  • 搭建一个vue项目、vue项目各配置文件作用和个人vue项目开发总结 流程如下: 一.安装node.js 1).在node.js 官网中下载安装包 2).打开下载完的NodeJs文件 3).在文件目录下建立”node_global“及”node_cache“两个...
  • vue.js谷歌插件 Vue Snackbar (Vue Snackbar) A Vue.JS plugin for creating and displaying snackbars following the material design policies created by Google. 一个Vue.JS插件,用于遵循Google创建的材料设计...
  • idea关于vue配置

    2020-06-04 10:23:27
    idea关于vue配置1.安装插件新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants...
  • Vue.js 框架

    2020-12-27 18:57:25
    vue.js 基础知识
  • 常见Vue.js指令 v-model 双向数据绑定 小栗子 双向绑定的原理 Object.defineProperty() get set 发布者—订阅者模式 一对多 修改了模型数据,只要是关联过的view部分,都会随着模型数据的改变而改变 通过数据劫持,...
  • vue入门全局配置

    2019-02-25 16:49:00
    Vue.config是一个对象,包含 Vue 的全局配置。可以在启动应用之前修改下列属性: silent 类型:boolean 默认值:false 用法: Vue.config.silent = true 取消 Vue 所有的日志与警告。 ...
  • vue.js学习

    2021-09-10 09:36:38
    1.2.1直接编写一个HTML页面,引用vue.js文件 项目结构如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head&g
  • Vue学习(一)Vue.js的基本使用

    万次阅读 2019-11-04 10:09:50
    Vue.js的的基本使用:模板语法、计算属性和监听、class、Style绑定、条件渲染、列表渲染......
  • 以前的工作主要侧重后端的...IntelliJ IDEA配置VUE开发环境 项目导入idea 项目发布 vue开发环境搭建 安装node.js:https://nodejs.org/en/,选择对应的版本下载安装即可。 安装成功后查看版本确认下是否安装成功..
  • Vue.js起步 步骤 第一步 创建 View 视图 ​ 应用程序的界面将显示在这里 第二步 创建 VM视图模型 ​ 控制器也就是 Vue.js 的实例 第三步 创建 Model 数据 ​ data 为 Vue.js 实例的固定属性,存储数据 第四步 ...
  • vue引入静态js文件

    千次阅读 2020-06-18 13:22:04
    由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置。由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译。 vue-cli 2.0的作法是在static文件下创建jsvue...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,975
精华内容 3,590
关键字:

vue配置关联js

vue 订阅