标签: vue-cli-3
不支持 Vue CLI3 应用程序、HTML srcset 和 size 属性？
我正在尝试使用响应式图像的srcset和sizesHTML 属性将特定图像提供给特定屏幕尺寸以进行性能优化和响应式设计。但是 Vue-loader 似乎不支持它们，有人遇到过类似的问题吗？如果不是，有什么可能的解决方案可以最好地优化主要受高清图像影响的应用程序性能。下面是我试图在 .vue 模板中实现的示例
<img srcset="../assets/img-1.jpg 300w, ../assets/img-1-large.jpg 100vw"
sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
alt="photo 1"
src="../assets/img-1-large.jpg">
提前致谢。
推荐指数
解决办法
查看次数
Vue.js：在 vue.config.js (vue cli 3) 中定义计算环境变量
Vue CLI 3 的文档在这里说https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code：
您可以在
vue.config.js文件中计算环境变量。它们仍然需要以VUE_APP_. 这对版本信息很有用process.env.VUE_APP_VERSION = require('./package.json').version
这正是我想要做的。但是我不知道如何在vue.config.js. 我试过：
module.exports = {
process.env.VUE_APP_VERSION: require("../package.json").version,
...
}
但它只会产生一个错误：
ERROR SyntaxError: Unexpected token .
/Users/lhermann/htdocs/langify/frontend/vue.config.js:2
process.env.VUE_APP_VERSION: require("../package.json").version,
^
有人知道吗？
推荐指数
解决办法
查看次数
在 Vue CLI 3 中从原始图像创建 webp 图像（作为替代版本）
我在最新的 Vue CLI 3 上有一个简单的 Vue 项目（我都是新手）。在 src 我有 100% 质量的 jpg/png 图像。默认情况下，构建时 cli 将创建 dist 目录，其中我的图像添加哈希（image.jpg 到 image.7a97ca45.jpg）但没有任何压缩。
所以我添加了 imagemin-webpack-plugin 和 imagemin-mozjpeg 和 imagemin-pngquant 来优化。它有效。在 dist 现在我有更小的 jgp 和 png。
const ImageminPlugin = require('imagemin-webpack-plugin').default
const ImageminMozjpeg = require('imagemin-mozjpeg')
const ImageminPngquant = require('imagemin-pngquant')
module.exports = {
configureWebpack: {
plugins: [
new ImageminPlugin({
plugins: [
ImageminMozjpeg({
quality: 70
}),
ImageminPngquant({
quality: '80-90'
})
]
})
]
}
}
但现在我还想要从原始 jpg 创建的 .webp 图像。所以我应该得到例如 image.7a97ca45.jpg 和 image.7a97ca45.jpg.webp（或 image.7a97ca45.webp）这样我就可以检测浏览器并提供正确的格式。
但我不明白如何在 vue.config.js 中强制 webpack …
推荐指数
解决办法
查看次数
如何确保 vuex 商店包含在我的构建中？
我有一个使用 vue cli 3 的 Vue 应用程序。我正在按照此处的指南尝试构建我的应用程序vue-cli-service build --target wc --name my-element [entry]
为了测试输出，我有一个 index.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<my-project></my-project>
<script src="https://unpkg.com/vue"></script>
<script src="my-project.min.js"></script>
</body>
</html>但是在浏览器中打开 index.html 时出现以下错误：
它指向 my-project.min.js 的这一部分：
我的 main.js：
import "@babel/polyfill";
import Vue from "vue";
import MyProject from "./MyProject.vue";
import router from "./router";
import store from "./store/index";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: …推荐指数
解决办法
查看次数
Vue CLI 3 + Vuetify - 不适用于 IE 11（Babel 不转译？）
我在我的项目中使用 Vue CLI 3 和 Vuetify。它在 Chrome 和 iOS 12 上运行良好，但在 IE11 和 iOS Safari < 12 上显示空白页面。 IE11 中的控制台显示：SCRIPT1003: Expected ':'
我认为这是因为 Babel 没有将 ES6 语法（箭头函数、展开等）转换为 ES5 语法。运行 yarn build 后，我仍然在编译后的代码中看到它。
这是我的 babel.config.js：
//bable.config.js
module.exports = {
presets: [
[ '@vue/app', {
useBuiltIns: 'entry'
}]
]
}
这是我的.browserslistrc：
//.browserslistrc
> 1%
last 2 versions
not ie <= 8
main.js 是这样的：
// main.js
import '@babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router …推荐指数
解决办法
查看次数
使用 webpack 根据 node 环境使用特定文件
我正在开发一个 Vue 应用程序（使用 cli 3）。第三方前端组件需要一个配置文件。我想根据我的节点环境使用不同的文件，但我不清楚如何做到这一点。例如，我的目录结构可能有 tree.production.js 和 tree.development.js。在我的主要 javascript 中，我似乎无法指定
import {tree} from `./assets/tree.${process.env.NODE_ENV}.js`;
我也不能使用 .env 文件来指定
import {tree} from `./assets/tree.${process.env.VUE_APP_TREE}.js`;
我想尝试的是利用 webpack a la vue.config.js 来使用正确的文件并将其重命名为 tree.js 所以在我的代码中我可以指定
import {tree} from "./assets/tree.js"
或者关于如何实现这种非常平凡且看似常规的开发/生产切换的任何最佳实践。
就像是
//vue.config.js
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// do something with tree.production.js...
} else {
// do something with tree.development.js
}
}
}
推荐指数
解决办法
查看次数
Vue CLI 3 构建输出带有波浪号“~”的文件
在我的应用程序中，我创建了不同的组件，这些组件共享常见的 UI 组件，如 AppButton、AppSelect 等。我使用 webpack 的代码拆分功能来延迟加载组件并获得单独的块。使用 Vue CLI 3 build 命令，我准备在 dist 文件夹中部署文件。
有谁知道波浪号“~”是什么意思？例如，在 dist 文件夹中，我可以找到settings-diet~start-personalization.6e2ac313.js包含波浪号的名称。
推荐指数
解决办法
查看次数
Vuetify 数据表头的国际化
我正在尝试使用 Vuetify + I18n 国际化我的数据表头。
当我翻译我的普通代码时，它可以正常工作，但现在我需要翻译我用 Vuetify 构建的数据表的标题。
我已经尝试添加代码this.$vuetify.t('$vuetify.activity.username')或this.$t('$vuetify.activity.username')在标题中，但没有任何反应。语言始终保持英语 (en)。
有人知道如何解决吗？
我在我的代码下方发送。
先感谢您。
活动.vue
export default {
data () {
return {
headers: [
{ text: 'ID', value: 'id', width: '1%', align: 'left' },
{ text: this.$vuetify.t('$vuetify.activity.username'), value: 'username', width: '1%' },
...
]
}
},
...
}
主文件
import messages from './assets/lang'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'en',
messages
})
// Vue.use(Vuetify)
Vue.use(Vuetify, {
lang: {
t: (key, ...params) => i18n.t(key, params)
} …推荐指数
解决办法
查看次数
如何在不运行 webpack 构建的情况下只对 vue 文件运行类型检查？
我只想键入 check vue 文件而不构建整个应用程序。有没有办法做到这一点？
我知道vue-cli-service serve并将vue-cli-service build通过 进行类型检查fork-ts-checker-webpack-plugin，但它构建了整个应用程序并且速度很慢。
推荐指数
解决办法
查看次数
构建 dist 文件夹并将其发布到 github 页面
我使用 Vue.js 和 Vuetify 使用 Vue CLI 创建了一个项目。我想用 Github Pages 托管这个应用程序。所以我从这里拿了一个指南
而且我没有使用 Vue Router ( https://router.vuejs.org/guide/essentials/history-mode.html )的历史记录来确保我不需要服务器。
我创建了我的项目的构建并将生成的 dist 文件夹重命名为 docs。此 docs 文件夹位于根目录（生成它的位置）中。当我选择master 分支 /docs 文件夹作为我的 Github Pages 发布源时，我得到一个空白页面。
当我检查控制台时，我得到一个
加载资源失败：服务器响应状态为 404()
对于在 dist/docs 文件夹中生成的每个文件。我错过了什么？
推荐指数
解决办法
查看次数
标签 统计
vue-cli-3 ×10
vue.js ×8
vue-cli ×3
vuetify.js ×3
webpack ×3
javascript ×2
babeljs ×1
github-pages ×1
html ×1
node.js ×1
typescript ×1
vue-i18n ×1
vue-loader ×1
vuex ×1
webp ×1