精华内容
下载资源
问答
  • Vue build 打包和部分vue-config-js配置

    千次阅读 2020-05-28 14:54:41
    vue 打包 当我们使用vue写好项目后我们需要将项目进行打包成html项目,使用一下命令可以打包项目。 npm run build ... -- dist -- css -- js -- img ...vue-config-js配置vue项目里创建vue.con

    vue 打包

    当我们使用vue写好项目后我们需要将项目进行打包成html项目,使用一下命令可以打包项目。

    npm run build

    在当前目录下输入打包命令,等待打包完成后在根目录生成一个dist的文件夹,里面是html页面和css,js,img文件夹。

     -- dist
     	-- css
     	-- js
     	-- img
     	-- index.html
    

    当然这个html项目我们无法通过双击的形式打开,我们需要创建一个服务才能运行此项目。

    vue-config-js配置

    vue项目里创建vue.config.js的文件,我们可以在里面配置项目,在打包的时候会按照配置的内容进行打包。

    // vue.config.js
    
    module.exports = {
    	// ...body
    }
    
    productionSourceMap 是否包含map映射文件

    默认为true,设置为false后就不会存在map映射文件;用于追踪线上错误信息,没什么太大的作用,因为项目有问题是不会上线。

    const path = require("path");
    module.exports = {
        productionSourceMap: false
    }
    
    outputDir 输出的文件夹名称

    默认输出文件夹为dist,我们也可以去修改他。

    // vue.config.js
    
    module.exports = {
    	outputDir: './myDist'
    }
    
    assetsDir 设置静态资源在同一个文件夹
    // vue.config.js
    
    module.exports = {
    	assetsDir: 'assets'
    }
    

    cssjsimg文件夹放在同一个文件夹中,目录结构如下

     -- dist
     	-- assets
    	 	-- css
    	 	-- js
    	 	-- img
     	-- index.html
    
    devServer 设置代理

    在实际开发过程中,前后端分离必定会存在跨域,设置代理解决这个问题。

    // vue.config.js
    
    module.exports = {
    	devServer: {
    		proxy: {
    			// 为单个请求设置代理
    			"/getData" : {
    				target : "http://localhost:3000"
    			}
    		}
    	}
    }
    
    // vue.config.js
    
    module.exports = {
    	devServer: {
    		// 统一设置代理
    		proxy:  "http://localhost:3000"
    	}
    }
    

    当然打包还有很多的配置,在网上也会有很多配置vue-config-js的博客,有兴趣可以搜索前往阅读。

    展开全文
  • 第一: config文件夹下的index....build/util.js文件下在 ‘vue-style-loader’ 之后加一行:publicPath: ‘…/…/’ 不然的话会有图片显示不出来,字体不能正常使用 第三: 如果你有本地json数据的话 把本地json数...

    第一:
    config文件夹下的index.js 中的文件中的 assetsPublicPath :‘/’ 改为’./’ 不然的话会是空白页,记住,是build那块
    在这里插入图片描述
    第二:
    build/util.js文件下在 ‘vue-style-loader’ 之后加一行:publicPath: ‘…/…/’ 不然的话会有图片显示不出来,字体不能正常使用
    在这里插入图片描述
    第三: 如果你有本地json数据的话
    把本地json数据中的路径全部给为根路径
    在这里插入图片描述
    第四:就是本地用api代理的,上线之后就不要代理了
    第五:不需要js文件中的.map文件的时候
    config index.js productionSourceMap: false

    好了,完了。

    展开全文
  • 需要一个配置文件,能在项目打包(build)时不被打包,方便修改,同时项目刷新时读取改配置。 实现方法如下: 1.在项目的static目录下创建project.config.json文件(名称随意,建议带上config关键字,易于辨识) ...

    需要一个配置文件,能在项目打包(build)时不被打包,方便修改,同时项目刷新时读取改配置。

    实现方法如下:

    1.在项目的static目录下创建project.config.json文件(名称随意,建议带上config关键字,易于辨识)

    内容为json格式:

    1 {
    2   "serviceUrl": "http://localhost:30001/service/api/",
    3   "baseUrl": "https://192.168.1.161/data/",
    4   "accessToken": "pk.eyJ1Ijf1w",
    5   "geoFenceRadius": 20,
    6   "retrieveInterval": 5000
    7 }

    2.在main.js中读取该配置

    读取到配置后放入 Vue.prototype.baseConfig中,(baseConfig名称可自定义)

    为了保证能在vue实例中配置随时可用,把vue的创建放到了axios读取配置的回调里面。

    代码如下:

     1 /* eslint-disable no-new */
     2 axios.get('./static/project.config.json').then((result) => {
     3   Vue.prototype.baseConfig = result.data
     4   new Vue({
     5     el: '#app',
     6     router,
     7     components: {App},
     8     template: '<App/>'
     9   })
    10 }).catch((error) => {
    11   console.log('get baseConfig error...' + error)
    12 })

    注意:

    读取配置信息用到了axios,需先安装并引入

    1 // 命令行安装
    2 npm install axios -S
    3 // main.js 引入
    4 import axios from 'axios'

    3.使用配置

      a.组件中使用,因为baseCofig已放入Vue.prototype中,组件中不需要引入,直接使用this获取

    1 this.baseConfig.baseUrl

      b. js文件中使用,需要先引入Vue,通过Vue.prototype获取配置

    1 import Vue from 'vue'
    2 let basetConfig = Vue.prototype.baseConfig

    4.build后可以在static目录下看的添加的配置文件

     

    转载于:https://www.cnblogs.com/jyughynj/p/11207436.html

    展开全文
  • ./“的配置,在项目后续的nginx反向代理,所以刚开始只单纯的修改了assetsPublicPath为”./",结果扔到线上页面无法显示,不能解析到首页。。。 查询后得知,除了修改assetsPublicPath这外,还需要修改其他...

    之前由于没有特别要求,故在项目之初没有将assetsPublicPath进行"./“的配置,在项目后续的nginx反向代理,所以刚开始只单纯的修改了assetsPublicPath为”./",结果扔到线上页面无法显示,不能解析到首页。。。
    在这里插入图片描述
    查询后得知,除了修改assetsPublicPath这外,还需要修改其他地方
    config/index.js文件中:
    在这里插入图片描述
    router/index.js文件中:隐藏mode: ‘history’ 或者修改为mode: ‘hash’ 默认模式即可
    在这里插入图片描述

    展开全文
  • service/bin/vue-cli-service.js,该文件的修改基于vue-cli的版本为3.0.0-rc.2版本,这是node_modules内部文件,所以在升级vue-cli3.0时会被覆盖掉,所以建议存档,并且修改package.json中的本地开发依赖配置对象...
  • Vue-cli3 搭建的项目 ...之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配那 只需要在项目的根目录下新建 vue.config.js 文件(是根目录,不是src目录) 语法 复制代码 module.exports = { // ...
  • vue3.x修改端口号配置vue.config.js

    万次阅读 热门讨论 2018-10-30 16:52:47
    首先在根目录创建vue.config.js    vue.config.js 里面代码: module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='...
  • vue.config.js配置如下:   const path = require('path'); const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟开发者工具 插件 (另:https://github.com/liriliri/eruda) ...
  • 如果静态文件不是部署在网站根目录下,vue-cli将给你造成巨大的麻烦,你不能直接把build好的文件抛进一个目录,你不能直接在本地打开用vue做好的静态网站。改成相对路径,主要需要做两步: 1、修改config => ...
  • vue项目 build之后外部修改请求地址

    千次阅读 2020-05-06 10:13:28
    由于项目的请求地址非常多,总监又不太希望配置环境变量去每次build,所以想打包外部修改,避免多次打包 当时这个需求给过来的时候有点蒙,毕竟做了三年的vue项目,一直都是配置环境变量在内部去做的打包区分 ...
  • 此文章用来解释vue-cli脚手架build目录中的utils.js配置文件 1.此配置文件是vue开发环境的wepack相关配置文件,主要用来处理css-loader和vue-style-loader 2.关于注释 •当涉及到较复杂的解释我将通过标识的方式...
  • 1. 通过 Git 克隆项目到本地 git clone ...3.修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 将persistent 参数改为 true,如下图: 4. 将扩展程序添加到chrome浏览
  • IDEA中配置VUE

    千次阅读 2019-04-03 17:38:00
    文章目录一,Vue配置二,导入Vue项目 一,Vue配置 1、File - Settings - Languages&Frameworks - JavaScript:修改JavaScript language version为ECMAScript 6,确认 2、File - Settings - Plugins:搜索vue,...
  • 于是网上了搜了大把大把的文章,很多都是修改了项目的结构,讨厌,vue-cli搞的那一套,干嘛要修改修改去的。像我这种前端小萌新,webpack的配置改着就把前台部分run不起来了。。。 于是就有了这个笔记: 先看看...
  • vue打包之后生成一个动态修改接口的配置文件 vue-cli3.0 使用vue-cli3.0脚手架,在项目根目录下的public文件夹下新增static文件夹,在static文件夹下新增config.js文件 在config.js文件中添加一个全局的window对象...
  • vue cli3.0 修改配置文件

    千次阅读 2019-03-06 03:13:31
    新版的vue-cli构建出来的项目目录没有build和config文件夹,需要改输入路径的地址,需要在项目的 根目录添加一个Vue.config.js。 修改资源目录 module.exports = { // 基本路径 baseUrl: './', // 生产环境是否...
  • 一、安装node环境(自带npm) 下载地址 二、替换下载源 // 淘宝 NPM 镜像 ... 三、全局安装vue-cli脚手架 ...vue init webpack vue_project 五、安装vuex npm install vuex --save 在main.js中注入v
  • Vue Build后的项目的根路径配置问题

    千次阅读 2019-11-02 22:46:43
    目录Vue Build后的项目的根路径配置问题问题描述修改方法 Vue Build后的项目的根路径配置问题 问题描述 使用Vue-cli 版本v3.12.1,build之后默认的根目录contextPath为/。如果正式部署的路径不是/,则需要修改...
  • 查看原文 配置步骤 ...第二步:在 main.js 中请求定义的配置文件,并放到 Vue.prototype 中,使全局可访问,注意,这里把new Vue()放在请求里执行,是防止请求与页面渲染之间的时间差异化导致值获取不...
  • 本人是个菜鸡,多处借鉴学习,综合整理出来这篇比较全面的 build配置文件说明。
  • browserify 配置 vue项目

    2018-08-26 20:05:29
    使用 browserify 尝试搭建一次 vue 项目,参考 vue-cli 里面 browserify配置 开始 // 安装browserify vue babelify(es6 es7等 转es5) npm i -D browserify babelify babel-core babel-preset-env babel-runtime ...
  • vue打包build的时候,配置路径

    千次阅读 2018-04-27 16:39:00
    找到build对象,修改属性assetsPublicPath为 ‘./’ 2.如果有背景图片 完成第一步之后,修改build文件夹下的utils.js文件 找到方法generateLoaders,修改下面一条if语句里的内容 if (options.extract) { return ...
  • 一、Idea中配置VUE

    2020-06-02 18:22:15
    idea版本:2018.2.3 ...二、idea配置vue File - Settings - Languages&Frameworks - JavaScript:修改JavaScript language version为ECMAScript 6 File - Settings - Plugins:搜索vue,安装Vue.js Run -
  • nginx配置vue项目,带项目名

    千次阅读 2020-01-01 15:41:13
    一、修改vue项目config/index.js中的build配置 assetsPublicPath:'/',改为assetsPublicPath:’/acdmSA/'。 二、修改router配置,src/router/index.js中修改router 增加base:'/acdmSA/'...
  • 修改配置文件,build/ webpack.prod.cong.js js 、css文件名称增加时间戳。
  • cli,大大简化了初学者环境搭建的成本,但是实际业务中我们往往需要实现其他的功能来对webpack进行改造,本文将会根据一些实际的业务需求,先学习vue-cli生成的模版,然后在进行相关修改Vue-cli生成模版文件目录 ...
  • vue去掉严格开发,即去掉vue-cli安装时的eslint 1.vue-cli书写规范(主要是js规范) a、逗号、冒号后面要加空格 b、不能使用双引号,一律使用单引号 webpack的语法检查eslint,即安装项目时我选择了安装eslint...
  • 1.先安装generate-asset-webpack-plugin npm install --save-dev generate-asset-webpack-plugin 注意:--save-dev(安装在devDependencies)开发环境使用 ...2.需要更改 build文件夹下的 web...
  • 后端采用Thinkphp开发接口只需要在application\api下写接口即可。 ...由于每次buid后都需要放到Thinkphp入口public目录下太麻烦了,所以我们可以修改配置,让他自动打包到public下,方法如下: VUE

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,322
精华内容 10,128
关键字:

build完修改配置vue

vue 订阅