标签: vue-cli

如何在 vue cli3 中缓存 service worker 中的 api 和资产

import { register } from 'register-service-worker'
import pwa from '@vue/cli-plugin-pwa'

if (process.env.NODE_ENV === 'development') {
// if (process.env.NODE_ENV === 'production') {
console.log(pwa)
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
    console.log(
      'App is being served from cache by a service worker.\n'
    )
  },
  cached () {
    console.log('Content has been cached for offline use.')
  },
  updated () {
    console.log('New content is available; please refresh.')
  },
  offline () {
    console.log('No internet connection found. App is running in 
    offline mode.')
  },
  error (error) {
    console.error('Error during …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js service-worker vue-cli

4
推荐指数
1
解决办法
2042
查看次数

在生产版本中更改 js 和 css 文件的文件路径

我需要一些帮助,或者至少需要指出正确的方向。我正在尝试使用 Vue CLI 3 部署 vuejs 应用程序。当我运行 build 命令时,文件被内置到 dist 文件夹中,这工作正常。dist 中还有一个 js 和 css 文件夹,其中包含相应的文件。在我的 index.html 中,路径被创建为 /css/app.css 或 /js/app.js。我希望文件与 index.html 和路径一起放置在 dist 文件夹中,以简单地读取 app.css 或 app.js。我的目标是删除 /css/.

我假设这是通过配置 webpack 在 vue.config.js 中完成的。我似乎无法弄清楚这一点。我了解 baseURL 设置,但我可以弄清楚这部分......任何帮助将不胜感激。

谢谢

webpack vue.js vuejs2 vue-cli vue-cli-3

4
推荐指数
1
解决办法
2360
查看次数

Vue 将对象作为计算属性展开

我的组件中有一个名为 的对象数组config和一个currentIdx属性。然后我发现自己需要这样做:

computed: {
    textStyle: function() {
        return this.config[this.currentIdx].textStyle;
    },
    text: function() {
        return this.config[this.currentIdx].text;
    },
    key: function() {
        return this.config[this.currentIdx].key;
    }
}
Run Code Online (Sandbox Code Playgroud)

我尝试将所有功能替换为:

computed: {
    ...this.config[this.currentIdx]
}
Run Code Online (Sandbox Code Playgroud)

它通过了编译,但我在浏览器控制台中出现错误。我认为问题在于computed需要函数,但扩展语法 (...) 返回对象。所以,我的问题是:在这种情况下,有没有办法减少重复?

谢谢!

javascript ecmascript-6 vue.js spread-syntax vue-cli

4
推荐指数
1
解决办法
8475
查看次数

Vue - 从另一个站点加载外部组件

我正在尝试从外部站点检索 vue 组件并将其加载到我的应用程序中,但我终生无法弄清楚这一点。

这是完整的场景;

  • 站点 A(内部托管站点)加载 VueJS 应用程序
  • 站点 A 从站点 B(内部托管站点,不同的子域)请求一个 VueJS 组件
    • 理想情况下,站点 B 将包含其原生 .vue 格式或预编译的 .vue 文件(可能是 vue-cli ?)
  • 站点 A 加载并呈现应用程序中的组件

假设我想从站点 B 加载一个非常简单的组件;

{
    "template": "<div><span>{{message}}</span></div>",
    "data": function() {
        return { "message": "Hello World" };
    }
}
Run Code Online (Sandbox Code Playgroud)

我已经尝试了以下方法,但结果喜忧参半;

在我的 index.ts 中(使用 TypeScript)

Vue.component('my-external-component', () => (Vue as any).http.get("http://test.local/test.js"));
Run Code Online (Sandbox Code Playgroud)

在我的 .vue 文件中

<my-external-component></my-external-component>
Run Code Online (Sandbox Code Playgroud)

这导致此注释被添加到 DOM

<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->
Run Code Online (Sandbox Code Playgroud)

但是添加

<component :is="my-external-component"></component>
Run Code Online (Sandbox Code Playgroud)

导致将空注释添加到 DOM

<!----> …
Run Code Online (Sandbox Code Playgroud)

vue.js vue-component vue-cli

4
推荐指数
1
解决办法
3230
查看次数

如何从Vue js中的实例外部访问数据?

我想从实例外部访问 vm 数据,如下所示:

myComponent.vue

export default {
    data() {
        return {
            name: 'Joe'
        };
    }
}
Run Code Online (Sandbox Code Playgroud)

主文件

var vm = new Vue({
    el: '#app',
    render: h => h(myComponent)
});
Run Code Online (Sandbox Code Playgroud)

想要的结果

console.log(vm.name);   // should return - Joe
Run Code Online (Sandbox Code Playgroud)

出于某种原因,控制台返回未定义。我做错了什么?

vuejs2 vue-cli

4
推荐指数
1
解决办法
9730
查看次数

vue-cli-service:SyntaxError:意外的令牌“...”。需要一个属性名称

我正在使用 vue 组装一个小应用程序,我特别需要它在不支持 ES6 的设备上运行。我正在使用vue-cli-service build构建,当尝试在我的 ES5 设备上打开此页面时,我看到此错误SyntaxError: Unexpected token '...'. Expected a property name.

我已经安装了 babel,并将其添加到我的 .babelrc 中: { "presets": ["@babel/preset-env"] }

我不确定还可以尝试什么,我找不到任何专门解决此问题的方法。甚至 vue-cli-service 文档也提出了支持 ES5 polyfill 的方法,但我认为这不是一回事。

npm vue.js vue-cli

4
推荐指数
1
解决办法
1341
查看次数

如何更新 vue cli 版本?

我想在 Vue 项目管理器上创建一个项目。当我尝试时,我看到了该错误消息;

“vue create 是仅适用于 Vue CLI 3 的命令,而您正在使用 Vue CLI 2.9.6。”

这是我的 vue --version 输出:@vue/cli 4.0.5。

我怎样才能解决这个问题?

我的系统配置如下:

Ubuntu 18.04 Npm 6.13.0 节点 10.16.3

vue.js vue-cli

4
推荐指数
1
解决办法
1万
查看次数

在新的 vue 项目上运行 npm run serve 时出错

我做的:

vue create myfirstapp 
atom (for open my editor)
cd myfirst app
npm run serve 
Run Code Online (Sandbox Code Playgroud)

我明白了

> myfirstapp@0.1.0 serve /home/paolinsky/Documentos/vueBasico/fazt/myfirstapp
> vue-cli-service serve

 INFO  Starting development server...
10% building 2/2 modules 0 activeevents.js:196
      throw er; // Unhandled 'error' event
      ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/paolinsky/Documentos/vueBasico/fazt/myfirstapp/public'
    at FSWatcher.<computed> (internal/fs/watchers.js:168:26)
    at Object.watch (fs.js:1351:34)
    at createFsWatchInstance (/home/paolinsky/Documentos/vueBasico/fazt/myfirstapp/node_modules/chokidar/lib/nodefs-handler.js:38:15)
    at setFsWatchListener (/home/paolinsky/Documentos/vueBasico/fazt/myfirstapp/node_modules/chokidar/lib/nodefs-handler.js:81:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/paolinsky/Documentos/vueBasico/fazt/myfirstapp/node_modules/chokidar/lib/nodefs-handler.js:233:14)
    at FSWatcher.NodeFsHandler._handleDir (/home/paolinsky/Documentos/vueBasico/fazt/myfirstapp/node_modules/chokidar/lib/nodefs-handler.js:429:19)
    at FSWatcher.<anonymous> (/home/paolinsky/Documentos/vueBasico/fazt/myfirstapp/node_modules/chokidar/lib/nodefs-handler.js:477:19)
    at FSWatcher.<anonymous> (/home/paolinsky/Documentos/vueBasico/fazt/myfirstapp/node_modules/chokidar/lib/nodefs-handler.js:482:16)
    at FSReqCallback.oncomplete (fs.js:165:5)
Emitted …
Run Code Online (Sandbox Code Playgroud)

javascript frontend npm vue.js vue-cli

4
推荐指数
1
解决办法
4703
查看次数

如何在 vue-cli 中设置 HTTP 标头?

我想在 vue-cli 中设置自定义标头。

vue的版本是2.5.2。

我在 main.js 中尝试过:

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false
Vue.http.headers.common['Cache-Control'] = 'no-cache, no-store, must-revalidate'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})
Run Code Online (Sandbox Code Playgroud)

但它返回:

Uncaught TypeError: Cannot read property 'headers' of undefined
Run Code Online (Sandbox Code Playgroud)

header http vue.js vue-cli

4
推荐指数
1
解决办法
6121
查看次数

Vue 3 + vue-i18n-next:我做错了什么?

我已经开始了一个 Vue 3 项目(目前只不过是一个带有 TypeScript 的样板)并尝试向其中添加 i18n。

据我所知,vue-i18n 在 Vue 3 中不能正常工作;但 vue-i18n-next 应该。

这是我的 main.ts

import { createApp } from "vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import { createI18n } from 'vue-i18n'
import App from "./App.vue";

//import en from "./locale/en.json"
//import ru from "./locale/ru.json"

const messages = {
    en: {
        message: {
            hello: 'hello world'
        }
    },
    ru: {
        message: {
            hello: '???? ????????????'
        }
    }
}

const i18n = createI18n({
    locale: 'ru',
/* …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vue-i18n vue-cli vuejs3

4
推荐指数
2
解决办法
5530
查看次数