Advertisement

vue 动态设置img的src地址无效，并在npm run build后找不到文件

  • 5星
  •     浏览量: 0
  •     大小:None
  •      文件类型：PDF

简介：
对于动态设置img src属性而言，该方法是不适用的；然而，可以直接将其配置为有效的解决方案。 解决方案是采用科学的方法以实现目标imageSource设置为使用require方法获取图片路径。在对src进行动态添加时，系统将其视为静态资源，并未经过编译过程。执行npm run build命令后会显示特定错误信息net::ERR_FILE_NOT_FOUND。在指定的构建目录中 > 启动JavaScript文件 webpack.prod.conf.js 中定位到 output 对象，设置参数值为 publicPath：.。具体的配置步骤如下：publicPath: process.env.NODE_ENV === production ? Process environment + config.build.asset

全部评论 (0)

还没有任何评论哟~
客服
客服
客服关闭
  • 关于Vue中npm run dev与npm run build差异的说明
    优质
    本篇文章详细解析了在使用Vue框架开发项目时，npm run dev和npm run build两个命令的区别及应用场景，帮助开发者更好地理解它们的作用。 关于Vue的`npm run dev`和`npm run build`的区别介绍如下： 在项目目录结构中可以看到以下文件： - `build` - `build.js` - `check-versions.js` - `dev-client.js` - `dev-server.js` - `utils.js` - `vue-loader.conf.js` - `webpack.base.conf.js` - `webpack.dev.conf.js` - `webpack.prod.conf.js` - `webpack.test.conf.js` 这些文件主要用于构建和开发Vue项目。`npm run dev`命令通常用于启动本地开发服务器，以便在开发过程中实时编译代码并提供热更新功能；而`npm run build`则用于将源代码打包成生产环境可用的静态资源，进行部署前的最终构建。 通过以上配置文件可以更好地理解这两个命令的具体作用和实现机制。
  • 解决Vue-cli使用npm run build在生产环境中打包后本地无法打开的问题
    优质
    本文介绍了如何解决使用Vue-cli通过npm run build命令在生产环境下构建项目后，出现的本地浏览器无法加载静态资源文件问题，并给出了解决方案。 在使用Vue-cli构建项目并进行打包的时候，我们常常需要区分开发环境与生产环境。通常，在生产环境中我们会执行`npm run build`命令来优化代码性能、压缩文件等操作。然而，完成这些步骤后，可能会遇到本地无法打开已打包应用的问题。这主要是由于Vue-cli默认的静态文件服务路径设置不当所引起的。 我们需要理解`npm run dev`与`npm run build`这两条命令的区别：前者用于开发环境，目的是方便开发者进行代码调试和编译；后者则在准备就绪后生成适合生产环境部署的优化压缩后的代码。执行完构建任务之后会生成一个dist目录，里面包含打包好的index.html文件以及static文件夹。 由于Vue-cli默认配置下静态资源路径设置为根目录，如果直接通过本地协议访问这些静态文件时可能出现加载问题。此时可以通过修改assetsPublicPath这一配置项来解决此问题：将该属性值从默认的空字符串（即根目录）改为相对路径`.`即可确保打包后的文件能够被正确引用。 具体操作如下： 1. 在执行`npm run build`命令前，打开项目根目录下的config/index.js文件，并修改assetsPublicPath属性为`./`。 2. 运行构建任务后，在dist目录中启动一个HTTP服务器以便预览效果。可以通过全局安装http-server工具来实现此目的：在终端输入`npm install -g http-server`命令进行安装； 3. 完成打包工作之后，回到dist文件夹内执行`http-server .`命令以开启本地Web服务。 4. 最后，在浏览器中访问由http-server提供的URL地址即可查看到生产环境下的应用界面。 通过以上步骤可以确保在本地顺利预览Vue-cli项目构建后的效果。这有助于我们在正式部署前检查打包结果并发现潜在问题，最终保证用户能够获得良好的体验。希望这些信息对遇到类似困扰的朋友有所帮助，并期待大家持续关注以获取更多实用的技术分享和经验总结。
  • 解决Vue项目npm run build后的路径错误问题
    优质
    本文介绍了如何在使用Vue.js构建项目时解决通过npm run build命令后出现的路径相关错误问题，提供实用的解决方案。 在build目录下的webpack.prod.conf.js文件中： output配置如下： ```javascript { path: config.build.assetsRoot, publicPath: dist, // 添加这行代码可解决相关问题，或者使用publicPath: .代替也可解决问题， filename: utils.assetsPath(js/[name].[chunkhash].js), chunkFilename: utils.assetsPath(js/[id].[chunkhash].js) } ``` 补充知识：在Vue项目打包完成后，可以通过修改npm run build命令的相关配置来解决可能出现的问题。
  • 使用vue-cli时减少npm run build后vendor.js大小的方法
    优质
    本文介绍了在使用Vue CLI构建项目时，如何通过优化配置来减小生产环境中vendor.js文件的体积，从而提高应用加载性能。 当使用vue-cli进行项目构建（npm run build）后，如果发现生成的vendor.js文件体积过大，这将直接影响到首屏加载时间，降低用户体验。为了解决这个问题，可以采取以下方法。 首先需要理解问题的本质：vue-cli的npm run build命令默认会将node_modules下的依赖项打包进vendor.js文件中。这种做法虽然简单方便，但当项目依赖项较多时会导致vendor.js变得异常庞大。对于一些不会频繁更新的依赖库，例如vue、axios、element-ui等，我们可以采取CDN的方式引入，这样用户在访问网站时可以不必每次都下载这些库，而是直接从CDN加载，减少文件大小，加快页面加载速度。 接下来是具体的操作步骤： 1. 在项目根目录下的index.html文件中使用CDN引入这些依赖库。例如： ```html ``` 注意，在生产环境中通常使用.min.js版本以减少文件体积。 2. 修改项目根目录下的buildwebpack.base.config.js文件，声明不打包的依赖项。例如： ```javascript externals: { vue: Vue, axios: axios, element-ui: ELEMENT } ``` 这样配置后，在构建过程中不会将这些外部依赖打包进vendor.js文件中。 2018年1月27日，为了进一步优化打包文件，可以安装并配置compression-webpack-plugin插件以启用生产环境的Gzip压缩。具体步骤如下： 1. 安装插件： ```bash npm install --save-dev compression-webpack-plugin ``` 2. 在webpack配置中启用该插件，并设置相关选项，如productionGzip为true，productionGzipExtensions指定需要压缩的文件类型。 3. 修改webpack配置后，在main.js文件中有对不应打包的依赖的import引入时，需去掉这些引用。否则即使在externals字段声明了也不起作用。 4. 在项目configindex.js中开启gzip压缩也有助于优化打包后的文件大小。 通过使用CDN加载依赖库和优化webpack的配置，可以有效减少vendor.js文件的大小，加快页面加载速度，提高用户体验。需要注意的是，在实施这些策略时要确保生产环境支持Gzip压缩，并且客户端浏览器能够处理压缩过的文件。
  • 解决Vue打包npm run build-test卡住的问题
    优质
    简介：本文详细介绍了在使用Vue.js进行项目开发时遇到的“npm run build-test”命令执行过程中卡住的问题，并提供了有效的解决方案。 今天遇到一件很奇怪的事情：当我输入 `npm run build-test` 命令后程序突然停止不动了！这让我感到非常困惑。 后来我在网上搜索了一下，发现只需要执行以下这条命令就可以解决问题： ```bash npm config set registry http://registry.cnpmjs.org ``` 另外，在使用 Vue 的单元测试和集成测试时（即 `npm run unit` 和 `npm run e2e`），可能会遇到一些常见的问题。例如，“localStorage is not available for opaque origins” 这样的错误信息，通常会在控制台的 node_modules 文件夹中显示。 这些问题在开发 Vue 项目过程中比较常见，可以通过查阅相关文档或在线资源来解决。
  • Vue.js 中动态设置 img 的 src 属性的方法
    优质
    本文介绍了在Vue.js中如何动态地为img标签设置src属性值，帮助开发者实现图片资源的灵活加载和管理。 需求如下：通过AJAX获取的数据格式为{ code: 200, data: { SumAmount: 200, List: [{ amount: 100, sex: male, fee: 1, id: 98, status: 2, time: 2015-08-11 }, { amount: 100, sex: female, fee: 0, id: 8, status: 2, time: 2015-06-12 }] }。
  • 在Vue中使用Npm run build通过环境参数打包不同域名的方法
    优质
    本文章介绍了如何在Vue项目中利用npm run build命令结合环境变量参数，实现根据不同域名需求进行差异化构建和发布的详细步骤。 本段落介绍了在Vue项目中使用`npm run build`命令根据环境参数打包不同域名的方法。通过传递不同的参数（如`npm run build --xxx`），可以判断当前构建的环境并配置相应的域名信息。具体内容可参考如下介绍。
  • Vue中设置动态请求地址的示例
    优质
    本文提供了一个在Vue项目中如何设置和使用动态请求地址的具体实例。通过该案例学习者可以掌握灵活配置API接口的方法。 今天为大家分享一个关于如何在Vue项目中设置动态请求地址的例子，具有很好的参考价值，希望能对大家有所帮助。一起跟随文章了解详情吧。
  • Vue中设置动态请求地址的示例
    优质
    本示例详细介绍了如何在Vue项目中灵活地配置和使用动态请求地址，包括环境变量、axios请求库的应用及其实战技巧。 在开发和生产环境下请求不同的地址（http 或 ws），以适应线上环境的需求，并且无论使用什么域名都不需要手动更改请求地址。 实现思路是使前端请求接口的地址简化，具体方法是在 Vuex 中设置总的接口地址，在生产和开发环境下配置不同的地址： ```javascript export const configUrl = { url: process.env.API_HOST, ws: process.env.API_WS } ``` 然后在 `config` 文件夹中分别设置 `dev.env.js` 和 `prod.env.js`，例如： ```javascript module.exports = merge(prodEnv, { NODE_ENV: development, }) ```