精华内容
下载资源
问答
  • 最近在搞Vue CLI的项目打包,出现了常见的路径问题,经过研究问题和文档,现在有了自己的看法,以下所有内容都是建立在Vue CLI3之上。关于vue.config.js文件:这个文件的配置主要是用来设置打包的文件相关信息的命令...

    最近在搞Vue CLI的项目打包,出现了常见的路径问题,经过研究问题和文档,现在有了自己的看法,以下所有内容都是建立在Vue CLI3之上。

    关于vue.config.js文件:

    这个文件的配置主要是用来设置打包的文件相关信息的命令:npm run build,而调试模式npm run serve,只不过是是对build到内存后,再次启动到node服务器。

    在调试模式下,这个文件的更新并不会因为ctrl+s保存而从新读取,只有重启服务才能生效。

    vue.config.js的详细配置信息请查看文档。

    关于预览打包

    这个问题一般都是仅仅需要你更改下vue.config.js中的publicPath设置,改为publicPath: "./",把路径改为相对路径。

    Hash模式路由的配置

    在这种情况下,一般只需要操作上面的路径更改就可以了。

    HIstory模式路由的配置

    先引用一段文档里的话:

    相对 publicPath 的限制

    相对路径的 publicPath 有一些使用上的限制。在以下情况下,应当避免使用相对 publicPath:

    当使用基于 HTML5 history.pushState 的路由时;

    在启用HTML5的History模式时,不应该把publicPath改为相对路由,这样请求的js和css文件会出错。

    image.png

    这是因为在使用嵌套路由后又使用了History模式,设置相对路由,打包后的静态文件也是以相对路径引入,所以会在前面加上去index这个当前路径的父路由。会因获取不到js文件而出错。

    因此文档建议使用绝对路径。

    在不使用嵌套路由时,按照前文的介绍配置是没有问题的,在嵌套路由的时候必须使用绝对路径。

    关于其他路径问题

    我们在Vue开发中常常使用一个vue-lazyload来处理懒加载图片,这个图片的路径问题也是需要考虑的。

    image.png

    同样默认使用相对路径,导致出现前文所说的问题。

    使用绝对路径后问题解决。

    image.png

    再次阅读文档后发现,给出的DEMO也是绝对路径(看文档不仔细😂)。

    其他闲话

    这个项目最开始是使用的Hash模式路由,修改publicPath为相对后就解决了问题。但是为了提高用户体验,要缓存滚动条位置,所以不得不使用History模式路由,所以一出现了一系列问题😭。

    展开全文
  • vue项目打包到上线的基础做法总结1、开发环境到生产环境的转变项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发路径切换为线上路径。打开项目中config文件夹里面的 dev.env.js 文件。...

    vue项目打包到上线的基础做法总结

    1、开发环境到生产环境的转变

    项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发路径切换为线上路径。

    打开项目中config文件夹里面的 dev.env.js 文件。

    'use strict'

    const merge = require('webpack-merge')

    const prodEnv = require('./prod.env')

    module.exports = merge(prodEnv, {

    NODE_ENV: '"development"',

    // BASE_API: '"http://192.168.1.***:3838/"' //开发者路径

    BASE_API: '"http://sdk.********.cn:3838/"' //线上路径,替换开发者路径

    })

    打开项目中config文件夹里面的prod.env.js 文件,将后端给的线上路径填入。

    'use strict'

    module.exports = {

    NODE_ENV: '"production"',

    BASE_API: '"http://sdk.*********.cn:3838/"' //线上路径

    }

    2、设置统一的请求路径

    犹豫项目打包之后,所有的js,css,图片都会在各自统一的文件夹内,所以,之前的路径需要改掉,单个修改花费时间太长,那么应该怎么做呢。

    打开build文件夹里面的utils.js,根据需求添加,通常会添加两个../。

    if (options.extract) {

    return ExtractTextPlugin.extract({

    use: loaders,

    fallback: 'vue-style-loader',

    publicPath : '../../' //新添加的内容,路径配置

    })

    } else {

    return ['vue-style-loader'].concat(loaders)

    }

    }

    在某种情况下,会出现html主路径引入不正确的问题,这时候我们需要配置config文件夹内部的index.js文件,修改assetsPublicPath,注意,这里的assetsPublicPath是build生产环境下的assetsPublicPath路径,而不是dev开发环境下的assetsPublicPath。

    image.png

    这个时候,就可以执行 npm run build 将项目打包,置于你们后端上线了。祝各位早日成为前端大牛,喜欢的点关注了亲亲!

    qinqin.gif

    展开全文
  • 文章目录说明发现一些朋友在群里询问如何线上发布vue项目.从而暴露出来很多有意思的问题.所以这篇博文简单介绍一下vue项目线上发布的情况.本地环境mac osnode 10.16vue 2.6vue-cli 4.0线上环境centOS6node 10.16...

    文章目录

    说明

    发现一些朋友在群里询问如何线上发布vue项目.

    从而暴露出来很多有意思的问题.

    所以这篇博文简单介绍一下vue项目线上发布的情况.

    本地环境

    mac os

    node 10.16

    vue 2.6

    vue-cli 4.0

    线上环境

    centOS6

    node 10.16

    nginx

    vue是最近很火的前端框架,

    所以它依赖的是浏览器,及我们可以从浏览器定位到你服务器nginx,然后nginx把指定的静态资源转发出来,最后我们在浏览器渲染看到

    不管你的服务器是iis,apache还是nginx

    只要http可以定位到服务器的静态资源即可.

    很多人会有问号?

    那为什么我在开发的时候用node命令直接就启动了呢!

    npm run dev

    这是因为我们本地并没有web静态服务器去定位资源,

    所以node本地启动了web服务器来守护一个进程,达到资源转发的效果,

    而且vue 启动的本地server可以直接帮我们做api代理.

    如下是部分关于本地server的配置

    devServer: {

    port: port,

    open: true,

    overlay: {

    warnings: false,

    errors: true

    },

    proxy: {

    '/admin': {

    target: '这里是你的代理api地址',

    changeOrigin: true,

    secure: false

    }

    }

    }

    所以线上发布的时候,我们服务器本来就有web服务器,完全不需要node再启动一个web服务,或者说干脆不需要node都可以.

    项目build

    项目build构建文件

    打包压缩后的静态资源文件被放到了dist 目录下

    const {

    run

    } = require('runjs')

    const chalk = require('chalk')

    const config = require('../vue.config.js')

    const rawArgv = process.argv.slice(2)

    const args = rawArgv.join(' ')

    if (process.env.npm_config_preview || rawArgv.includes('--preview')) {

    const report = rawArgv.includes('--report')

    run(`vue-cli-service build ${args}`)

    const port = 9526

    const publicPath = config.publicPath

    var connect = require('connect')

    var serveStatic = require('serve-static')

    const app = connect()

    app.use(

    publicPath,

    serveStatic('./dist', {

    index: ['index.html', '/']

    })

    )

    app.listen(port, function (){

    console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))

    if (report) {

    console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))

    }

    })

    } else {

    console.log(chalk.green(`环境:${process.env.NODE_ENV},publicPath${publicPath},args:${args}`));

    run(`vue-cli-service build ${args}`)

    }

    发布dist

    把你的生成静态文件上传到服务器,

    我是直接git clone

    配置nginx server {

    listen 80; # 监听80端口

    server_name admin.yijiebuyi.com; # 浏览器域名

    location / {

    root /home/www/admin/dist/; # 服务器静态文件存放的目录

    index index.html; # 主页

    }

    location /admin {

    proxy_pass http://api.yijiebuyi.com/; # 代理接口地址

    }

    }

    展开全文
  • Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘。1、js 路径问题脚手架默认打包的路径为绝对路径,改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath,...

    Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘。

    1、js 路径问题

    脚手架默认打包的路径为绝对路径,改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath,把原来 ‘/’ 改为 ‘./’

    assetsPublicPath: './'

    }

    2、img 路径问题

    在 build/utils.js 文件中 ExtractTextPlugin extract 节点下,添加一行:publicPath: ‘…/…/’

    fallback: 'vue-style-loader'publicPath: '../../'

    } ['vue-style-loader'}

    3、favicon.ico 问题

    ① 在 build/webpack.prod.conf.js 文件中 new HtmlWebpackPlugin 节点下, 添加一行:favicon: config.build.favicon

    template: 'index.html'})

    ② 在 config/index.js 文件中 build 节点下,添加一行 : favicon:path.resolve( __dirname,‘…/src/favicon.ico’ )( PS:favicon.ico 放在 src 目录下)

    module.exports =favicon:path.resolve(__dirname,'../src/favicon.ico'}

    4、IE9+ 兼容性问题

    由于 axios 是基于 promise 之上实现的,在 IE 下会有兼容性问题。

    ① 安装 babel-polyfill

    yarn add babel-polyfill

    ② 修改 build/webpack.base.conf.js 文件中 entry 节点

    app: ['babel-polyfill','./src/main.js'}

    5、禁止生成 .map 文件

    修改 src/config/index.js 中 productionSourceMap 值

    productionSourceMap:

    展开全文
  • 几种设置publicPath后,再对比打包后的index.html文件 测试背景: 每次打包build完后,都单独生成一个/dist文件夹,且dist中每次都只有相同文件目录 部署的时候,是部署在服务器的一个/test文件夹... // publicPath:
  • import { PopupManager } from 'element-ui/src/utils ...vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下:vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在http服务器...
  • Vue CLI4.0 webpack配置属性——publicPath

    千次阅读 2020-04-28 17:35:45
    用法和 webpack 本身的 output.publicPath 一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。 默认情况下,Vue CLI 会假设你...
  • 主要介绍了Vue-cli assets SubDirectory及PublicPath区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • vue-cli设置publicPath几种方式对比

    千次阅读 2020-06-11 09:40:29
    publicPath打包设置 1. 不设置(默认为 publicPath: ‘/’) 或者设置 publicPath: '/' // vue.config.js module.exports = { publicPath: '/', } html中被打包的css和js路径如下 <!DOCTYPE html> <...
  • webpack/vue-cli 中的 publicPath / 和 ./ 的区别 在说这个问题之前,vue-cli 的配置文档已经说的非常清楚了 publicPath 而 webpack 对于 publicPath 的描述相对苍白。但是 vue-cli 对于我们来说也是一个黑盒子,...
  • 新版Vue项目配置项目名称-publicPath-前端 v1.0.0 学生宫布 8416837 webpack 4.28.4 文章目录js配置 js配置 vue.config.js module.exports = { publicPath: process.env.NODE_ENV === "production" ? "/ui-pro...
  • Vue CLI 3.3 起已弃用baseUrl,请使用publicPath。 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这...
  • 当不配置vue.config.js或者没有publicPath属性时,默认访问的静态路径是服务器的根目录 服务器根目录下没有js文件夹所以访问失败,把dist下的js,css等静态文件剪切到wamp/www目录下就可以正常访问了(注意重启wamp...
  • vue.config.js 是否为生产环境 const isProduction = process.env.NODE_ENV !== 'development' 配置 publicPath module.exports = { publicPath: isProduction ? 'portal' : '/' }
  • If I deploy the app under a nested public path and build the project accordingly - The app when run - rewrites the url Bar and removes the nested path altogether. <p>I've tested with a vue-cli ...
  • vue文档提示 baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath。但是用了之后还报错所以 凡是出现标题这个错误的都直接将 vue.config.js 里面的 publicPath 改成 baseUrl,即可
  • 具体原因是因为版本支持的问题,publicPath 属性到 vue-cli 3.2.0 之后才支持,所以将 publicPaht 改成 baseUrl 即可,或者升级你的 vue-cli 。 转载于:https://www.cnblogs.com/similar/p/10412056.html...
  • 这篇真的写的很好。直接转了。 https://www.jb51.net/article/184694.htm
  • publicPath" is not allowed npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! insterest-web.1.0 serve: <code>vue-cli-service serve --open npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ...
  • 刚从远程clone下来的代码,npm run dev... ERROR Invalid options in vue.config.js: "publicPath" is not allowed npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! iview-admin@2.0.0 dev: `vue-cli-service s...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,771
精华内容 708
关键字:

publicpathvue

vue 订阅