标签: vue-cli

我正在尝试在 AWS amplify 中部署 vue 应用程序。

以下是我的构建配置 -

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run production
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

我在 vue 应用程序中的 package.json -

{
    "name": "foobar",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "start": "./bin/web.js",
        "serve": "vue-cli-service serve --mode development",
        "production": "vue-cli-service build --mode production",
        "sandbox": "vue-cli-service build --mode sandbox",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "axios": "^0.18.0",
        "bignumber.js": "^8.0.1",
        "bootstrap": "^4.3.1",
        "connect-history-api-fallback": "^1.5.0",
        "cors": "^2.8.5", …

我遇到了这个答案，但我没有使用 Nuxt.js。我正在使用 Vue CLI。

有没有办法在 Nuxt.js 中使用 sass 而不是 node-sass （sass-loader 的默认值）？

在 Vue CLI 的官方文档中，它显示了一个使用 Dart Sass (sass) 的示例，但在 Vue Loader 文档中，它显示了一个使用 Node Sass (node-sass) 的示例。我只想使用 sass，但收到缺少节点模块 node-sass 的错误。我可以在哪里更改配置以改用 Dart Sass？

vue 和 vue-i18n 版本

前任：

• vue：3.0.0.0
• vue-i18n：9.0.0-beta.15

描述

我可能做错了一些事情，但是我真的很感激一些指导。我遵循了 vue-i18n@next 的文档。翻译不起作用，我在控制台中收到消息：

[intlify] 此版本不支持消息格式编译。因为不包括消息编译器。您需要预编译所有消息格式。所以翻译函数返回'hello'。

可能出什么问题了，这很容易吗？

我使用 vue-cli 创建了一个 vue(2.x) 项目。

我@splidejs/vue-splide在这个项目中使用了 npm 模块。

该项目必须支持 IE10...

该@splidejs/vue-splide模块在 IE 中不起作用，所以我创建了一个vue.config.js文件并如下编写。

module.exports = {
  transpileDependencies: [
    "@splidejs/vue-splide"
  ]
}

之后我npm run serve再次运行命令。但ie错误仍然没有解决。

请帮我做什么。

有很多事情要做。让我摆脱 Internet Explorer 的支持。

我正在尝试使用 VueJS 3 项目中的 .env 文件访问 env 变量，遵循 vue 3 的文档和此处的一些问题，但似乎没有任何效果。

我已经检查过，.env 位于根目录内，我已经停止并重新运行了该项目数百次，重建了一切，但我仍然对这个狗屎没有限制，而且我发现总是相同的提示，很多人抱怨这个功能。

我希望你可以帮助我。我是 vue/i18n 和其他方面的新手，很抱歉，如果响应很简单或者已经存在于其他地方，但我没有找到它......

我尝试使用 vue-cli 和 vue-cli-plugin-i18n 生成一个新项目，但生成的源代码未构建...

让我解释一下，我在打字稿中使用 vue-cli 生成了一个新的 vue 项目，就像 使用 vue-cli 时的配置一样

然后，我尝试使用命令“vue add i18n@next”将 i18n 插件添加到这个新项目中，并 在将 i18n 添加到上一个项目时选择这些选项配置

这是我的packagess.json 文件的内容

{
  "name": "my-vue-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
  },
  "dependencies": {
    "register-service-worker": "^1.7.2",
    "vue": "^3.2.13",
    "vue-i18n": "^9.1.0",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@intlify/vue-i18n-loader": "^2.1.0",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": …

题

我希望看到chrome中的vue-cli欢迎页面,从我Mac上的Docker Container运行.我正在努力为此设置正确的配置.我错过了什么？这是我尝试过的.

脚步

安装

1. 适用于Mac的Docker - 17.12.0-ce
2. npm 5.6.0
3. vue-cli 2.9.3

命令行

1. $ vue init webpack docvue
2. $ cd docvue
3. $ npm install

档

运行上面的命令后,我现在准备好使用webpack构建vue示例项目.

$ ls
README.md       config          node_modules        package.json        static
build           index.html      package-lock.json   src

在/docvue/我可以npm run dev,我看到:

> docvue@1.0.0 dev /Users/dchaddportwine/Startup/docvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting                                                                        

 DONE  Compiled successfully in 4695ms                                                                              12:17:04 PM

 Your application is running here: http://localhost:8080

在Chrome中,http://localhost:8080/#/我看到了Vue Welcome页面.

构建Docker镜像

现在是时候使用这个Dockerfile构建Docker镜像了:

# base image
FROM node:8.10.0-alpine …

我正在尝试学习和测试即将推出的vuejs/vue-cli版本(beta 3.0),这将是向最简单的webpack配置迈出的一大步.与此同时,很少有例子....

作为测试,我试图从vue-cli v2开始

webpack.dev.conf.js

plugins: [
    ...
    // copy custom static assets
    new CopyWebpackPlugin([
        {
            from: path.resolve(__dirname, '../static'),
            to: config.dev.assetsSubDirectory,
            ignore: ['.*']
        }
    ])
]

到新的vue-cli版本3(测试版)

vue.config.js

const path = require('path')

module.exports = {
    chainWebpack: config => {
        config
            .plugin('copy')
            .use(require('copy-webpack-plugin')), [{
                from: path.resolve(__dirname, '../static'),
                to: 'static', ignore: ['.*']
            }]
    }
}

赛跑

npm run serve

不抱怨......

所以它似乎没问题,但我想知道是否有一些关于这个主题已经存在的论文,tuts,例子...从现在开始我只通过阅读现有代码源来发现新功能

目前我正在努力转换这个:

new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery'
}),

我试过了 .

config
  .plugin('provide')
  .use(require('webpack.ProvidePlugin')), [{
    $: 'jquery',
    jquery: …

我使用Vue CLI制作了一个简单的Vue应用程序,现在我想在html的头部添加Google Tag Manager代码,仅限于生产版本.我可以使用像php这样的服务器端语言来做这个,所以我尝试将index.html更改为index.php,但是当我构建项目时,它会输出一个index.html注入应用程序,而index.php没有注入应用程序dist文件夹.php代码也不能与vue cli中的webpack-dev-server一起使用.

如何将一些服务器端代码(它不必是php)集成到vue cli生成的vue应用程序的索引中,以有条件地为生成构建添加标记管理器代码？我不确定vue cli构建过程是如何完成的.我可以告诉它使用不同的index.html进行生产构建吗？

额外:我有兴趣了解有关vue cli构建过程的更多信息.恩.模板index.html中没有脚本标记,那么在构建或使用webpack-dev-server时,Vue如何将自身注入索引？

我正在使用Vue-CLI创建Vue应用程序。我不喜欢的一种行为是localhost:8080/nonexistent/file.html，使用代码200提供任何不存在的URL（例如），就像它是root：一样localhost:8080。

这使得调试XHR请求有时真的很混乱。

如何使其返回404代码？