如何集成vue.config.js
vue.config.js是Vue项目的配置文件，用于配置项目的构建和开发环境。
在Vue项目中，可以通过创建vue.config.js文件来自定义项目的构建配置。该文件应该位于项目的根目录下。
集成vue.config.js的步骤如下：
- 在项目根目录下创建一个名为vue.config.js的文件。
- 打开vue.config.js文件，可以使用CommonJS模块化语法来编写配置。
- 在vue.config.js文件中，可以配置各种选项来定制项目的构建和开发环境。以下是一些常用的配置选项：
- publicPath：指定项目的公共路径，用于部署到服务器时的路径配置。
- outputDir：指定项目的输出目录，默认为dist。
- assetsDir：指定静态资源的输出目录，默认为static。
- devServer：配置开发服务器的选项，如端口号、代理等。
- css：配置CSS相关的选项，如是否开启CSS source map等。
- chainWebpack：通过链式操作修改内部的Webpack配置。
- 根据项目的需求，进行相应的配置。可以根据官方文档或其他资源来了解更多配置选项的详细说明。
- 保存vue.config.js文件。
集成vue.config.js后，可以通过修改配置文件来满足项目的特定需求。例如，可以配置打包输出的路径、配置代理服务器、配置自定义的Webpack配置等。
腾讯云相关产品和产品介绍链接地址：
- 云开发（CloudBase）：https://cloud.tencent.com/product/tcb
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 云函数（SCF）：https://cloud.tencent.com/product/scf
请注意，以上链接仅为示例，具体的产品选择应根据实际需求进行评估和选择。
相关·内容
1回答
我们有一个vue-cli 3项目。它运行得很好，编译也没有问题。
事实上，我们只能支持支持ES5代码的旧浏览器。
在这个项目中，我们集成了一些用ES6编写的外部库(reconnecting-websocket就是一个例子)。
问题
在用这些外部代码编译我们的项目之后，由vue-cli生成的代码就有了ES6代码。
例如，我们的chunk-vendors.js有以下代码：
/*!
* Reconnecting WebSocket
* by Pedro Ladaria <pedro.ladaria@gmail.com>
* https://github.com/pladaria/r
浏览 1提问于2018-10-02得票数 20
我有一个ASP.NET核心Web应用程序，我想提供两个VueJS应用程序，一个用于Admin，一个用于用户。
所以我做了这样的设置配置：
app.Map("/users",
adminApp =>
{
adminApp.UseSpa(spa =>
{
spa.Options.SourcePath = "AppFront";
spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
浏览 4提问于2020-07-03得票数 1
我想将Vue集成到我的.net MVC项目中。我已经使用CLI安装了Vue，并添加了以下vue.config.js module.exports = {
devServer: {
proxy: {
'/': {
target: 'http://mvcsite.local',
changeOrigin: true
}
},
disableHostCheck: true
},
runtimeCompiler: true
}; 代理运行得很好，除了对根http://local
浏览 9提问于2019-03-14得票数 2
回答已采纳
我在项目的基本目录中有一个vue.config.js文件。我想把它移到/config/文件夹中的其他配置文件旁边。
如何为vue-cli指定此文件的新位置
浏览 0提问于2018-09-01得票数 9
回答已采纳
出于开发目的，我不使用npm run serve，因为我正在将Vue与我的后端项目集成。相反，我用package.json编写了自己的命令：
"dev": "vue-cli-service build --mode development --watch"
这一切都很好，但是它在我的build目录中生成了大量webpack的热update.js文件，问题是它们的不被删除。
是否有一种方式来配置vue-cli/webpack，使这些文件被自动删除，或者根本不被创建？
浏览 0提问于2019-04-04得票数 0
当项目由Vue-CLI3创建时，会创建一个public/index.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=d
浏览 3提问于2018-09-02得票数 0
回答已采纳
1回答
我在我的同伴主机服务器中感到困惑，使用ip地址和子文件夹访问门户网站等，然后使用vuejs，但我只知道使用子域的推送主机。我的问题是如何配置vuejs在我的主机上使用子文件夹访问？
浏览 1提问于2021-03-01得票数 0
我目前正在开发一个具有SASS集成的VueJS项目，我希望能够访问组件脚本部分中的SASS变量，以便进行动态样式计算。我在纯JS中看到了这方面的例子，并试图将其转换为VueJS组件。
到目前为止，我已经能够在Vue文件的样式部分集成SASS变量，但是我无法将导入到组件脚本中的变量。
我尝试了以下几点：
导出我的scss文件中的变量：
:export {
primaryColor: $primary;
}
然后在我的组件中导入文件：
import variables from '@/assets/scss/main.scss'
并按如下方式访问它：variables.pr
浏览 2提问于2021-04-03得票数 2
1回答
我想从vue项目中创建一个简单的库，并在任何其他js框架中使用它，如Angular，react。我已经创建了一个简单的项目，并尝试使用以下命令将其转换为lib。
npx vue-cli-service build --target wc --inline-vue --name hello-world
此命令将创建js文件。和一个html文件，其中包含。
<script src="https://unpkg.com/vue"></script>
<script src="path/to/my-element.js"></s
浏览 1提问于2021-04-16得票数 0
我有点迷路了，需要一些VueJs的帮助。我正在使用Vue CLI3，并创建了一个新的Vue项目，其中的所有内容都在工作，控制台中没有错误等。然而，在运行构建任务后，我dist文件夹中的副本显示为一个空白页面。我了解到这是因为需要更新assetsPublicPath:并删除'/‘向前斜杠。要做到这一点，我被告知您必须更新配置文件index.js，但在我的proect中没有这样的文件？我也被告知有一个config folder，但不是吗？ 因此，我该如何更新以下内容 来自assetsPublicPath: '/', 转到assetsPublicPath: '
浏览 9提问于2019-01-18得票数 0
const apolloProvider = new VueApollo({ defaultClient })
Vue.config.productionTip = false
new Vue({
provide: apolloProvider.provide(),
router,
store,
render: h => h(App)
}).$mount('#app')
当我将ApolloBoost集成到Vue CLI3中时，我遇到了问题。它说，“无法从非EcmaScript模块(只有默认导出可用)重新导出命名的'visitInParallel
浏览 1提问于2018-11-27得票数 2
回答已采纳
我有一个用vue-cli生成的简单项目。当我运行vue-cli-service build命令时，它会正确地生成CSS文件。当我运行vue-cli-service build --watch命令时，它只构建JavaScript文件。没有CSS文件。 如何在监视模式下生成CSS文件？
浏览 45提问于2019-09-25得票数 8
回答已采纳
我有一个非常基本的Vuejs应用程序，我想上传到生产部门来测试它，运行命令
npm run build
它创建了一个dist文件夹，其中包含一个index.html和js, css, img文件夹，当在浏览器控制台中将这些文件上传到我的服务器时，会收到以下错误
app.b77b1ab7.css:1未能加载资源:服务器响应状态为404 (未找到)
app.c83b8068.js:1未能加载资源:服务器响应状态为404 (未找到)
512d43c3.js:1加载资源失败:服务器响应时状态为404 (未找到)
/css/carousel.b4d817f1.css:1加载资源失败:服务器响应状态为4
浏览 5提问于2019-07-26得票数 1
我有一个文件组件，我需要导入Vue：
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
...
@Component({...})
export class Comp extends Vue {...}
我在浏览器中将vue.js作为模块导入：
<script type="module" src="module/vue/vue.js"></script>
但我明
浏览 4提问于2019-09-17得票数 7
我使用Vue创建一个简单的应用程序，并使用axios调用端点
axios.post(url, {
email: this.email,
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
我知道错误了
来自原点的 '‘已被CORS策略阻止:对飞行前请求的响应不通过访问控制检查:它没有HTTP状态。
问题不在服务器级别，我已经从邮递员那里做过测试，或者直接用CURL进行测试，而且不会产生错误。
溶液
浏览 2提问于2020-08-30得票数 1
我理解如何控制基于publicPath变量的process.env.NODE_ENV。我的vue.config.js正像预期的那样工作，但只适用于production和非production环境。当我拥有qa、dev和stage环境时，如何控制qa变量？
注意:我添加了我的.env.qa、.env.dev和.env.stage。
vue.config.js：
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/ProductionEnv/'
: '&
浏览 10提问于2021-02-19得票数 1
回答已采纳
1回答
我试图在我的Vue项目中改变iView的主题。我遵循了在这个链接中找到的步骤：
我在主项目文件夹中创建了一个名为my-theme的文件夹。在其中，我有一个名为index.less的文件，它包含我的主题的样式。我还使用以下命令安装了更少的加载程序
npm install less-loader --save-dev
然后，我将主题导入到我的main.js文件中，如下所示：
import iView from 'iview';
import '../my-theme/index.less';
Vue.use(iView);
但是，当我试图加载我的项目时，我会得到
浏览 2提问于2019-05-08得票数 0
1回答
我有一个使用laravel和vue的webpack配置，我正在使用vue-cli-3将其转换为vue spa应用程序。但是我不能理解如何将mix配置更改为vue.config.js。这是我的webpack.mix.js配置。
resolve: {
modules: [
'node_modules',
path.resolve(__dirname, 'resources/assets/js'),
path.resolve(__dirname, 'resources/assets/svg')
浏览 12提问于2018-08-24得票数 3
回答已采纳
我使用的是Vue CLI，它抽象了许多Webpack配置，用于运行和构建应用程序。这带来了一些好处，但我不知道如何为.scss文件目录创建特定的规则。
我希望这些文件在构建时被解压缩为单个文件，而不是，而是单独编译到一个主题目录(./dist/themes)中。
我尝试在vue.config.js中创建一个规则来识别目录，但它不起作用：
module.exports = {
runtimeCompiler: true,
configureWebpack: config => {
config.module.rules.push(
{
test:
浏览 0提问于2020-10-28得票数 0
我正在做一个由VueCLI 3.0开发的项目。我在根目录中创建了一个配置文件，名为vue.config.js。我已经定义了我的自定义配置。但是每次我必须在每个component文件中加载这个文件才能使用它。在每个js文件和component中是否存在全局获取的方法或选项。
我是VueCli的新手。
这是我的vue.config.js文件:-
// vue.config.js
module.exports = {
api : {
server: 'http//:192.168.0.1'
}
}
在我的App.vue里-我想用
浏览 2提问于2020-03-18得票数 0
开始使用Vue cli 3。我创建了这样一个vue.config.js .
// vue.config.js
var path = require('path');
module.exports = {
baseUrl: process.env.NODE_ENV === 'production'
? '/production-sub-path/'
: '\/mobileapp\/v\/',
configureWebpack : {
devServer:{
headers: {
浏览 1提问于2018-06-18得票数 1
回答已采纳
1回答
我在本地主机的8080端口上运行了一个vuejs应用程序，当我在浏览器中打开它时，站点不会加载，chrome会警告我站点没有响应。我还有一个运行在端口5000上的python flask后端，它工作得很好。这是一个常见的问题吗？如果是这样，我该如何解决它？谢谢!
浏览 2提问于2020-02-01得票数 0
1回答
我使用的是Vue/cli版本4.2.2，我下载了vue-svg-加载程序，我在这里遵循接受的答案，根据注释，我必须配置vue.config.js，但是我找不到我应该如何配置它。
当前，这些是我的vue.config.js文件的内容：
const path = require("path");
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
"
浏览 0提问于2020-02-13得票数 2
回答已采纳
2回答
我目前正在遵循关于将我的Vue.js前端与我的Django后端：集成的指南。
现在，我只想将默认的Vue.js样板页面呈现到服务器的上。
我使用django-admin startproject django-vue-template初始化Django，在新创建的django- Vue模板文件夹中，运行vue create .来初始化Vue CLI。然后我运行了npm run build，所以我的项目文件夹树现在看起来像了。
我还将这些更改添加到我的settings.py中：
TEMPLATES = [
{
'BACKEND': 'django.
浏览 0提问于2019-02-12得票数 4
回答已采纳
我试图将一个devServer配置添加到babel.config.js文件(Vue 3项目)中，并得到了这个错误。即使我从复制原始代码，它仍然报告此错误。
错误：
Error: Unknown option: .devServer. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
at throwUnknownError (/Users/aman/Desktop/Vue/vue01/node_modules/@babel/core/lib/config/va
浏览 5提问于2020-12-31得票数 2
回答已采纳
2回答
我相信npm run serve命令在默认情况下使用js的源地图，但这似乎不是因为我总是看到vue.runtime.esm.js:619。
我在根级项目中创建了一个vue.config.js文件。
我尝试了两件事：
module.exports = {
configureWebpack: config => {
config.devtool = 'source-map'
}
}
和：
module.exports = {
configureWebpack: {
devtool: 'source-map&#
浏览 22提问于2020-01-11得票数 8
我有一个VUE应用程序，我需要在外部链接上运行它，而不是在本地主机上。
我试着创建一个
vue.config.js
devServer: {
host: 'http://my-testing-web-address.com',
port: 8080,
...
}
并设置devserver，但仍未更改
当我跑的时候
npm run serve
上面写着
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.100:8080
这是设置外部devserve
浏览 6提问于2019-05-03得票数 2
我正在使用以下vue.config.js：
module.exports = {
devServer: {
proxy: 'http://localhost:8000'
},
publicPath: '/admin/',
outputDir: '../backend/admin/'
}
我在端口8000上运行节点应用程序作为后端服务，vue前端使用vue-cli-service服务运行，问题是HMR的websocket连接正被代理到后端。HMR工作正常，但我们不断收到后端的请求，例如：
/sockjs-node/931
浏览 1提问于2019-04-30得票数 0
VueCli3在index.html中自动添加app.js。我想将该app.js文件重命名为其他名称。这样做有可能吗？
浏览 44提问于2019-02-04得票数 3
回答已采纳
我有一个多页面的Vue.js应用程序，在域/合法；域/提交等方面有工作页面。我在Vue.js‘ (即自定义vue.config.js)的帮助下实现了这一点。
换句话说，我很好地完成了上面的工作。
现在，我正在尝试在新的子目录级别下实现更多嵌套的页面(除了上面已经有的那些)。即
域/org/profile1
域/org/profile2
域/org/profile3
通过自定义vue.config.js使其工作的任何方法
当前尝试vue.config.js代码：
module.exports = {
pages: {
index: {
entry: &
浏览 2提问于2020-07-16得票数 7
回答已采纳
使用Angularjs或vue需要节点。并允许CORS请求(如ReactJS在conf文件中所做的)？是否有办法不允许在服务器上使用CORS过滤器？
浏览 3提问于2022-01-19得票数 1
3回答
我已经有这个问题快两天了，任何帮助都是救命稻草。 我有我的vue应用程序运行在8080开发模式下，我正在尝试集成区块堆栈登录，该应用程序尝试读取http://localhost/manifest.json，所以我将其放在静态目录中，但它抛给我cors错误，我们有解决方案的vue线索配置，如vue.config.js？
浏览 28提问于2019-02-19得票数 8
回答已采纳
我使用vue-cli 3.0.0-rc.3生成了一个应用程序。
现在我想使用Visual代码(Chrome的调试器)来调试它，但是我似乎找不到打开sourceMaps的选项。
我在VSCode中设置了断点，但没有命中。如果我在vue.config.js中指定：“vue.config.js: true”，则出现错误“vue.config.js中的无效选项："sourceMaps”不允许“
要使调试工作，需要设置哪些选项？
浏览 4提问于2018-06-21得票数 4
回答已采纳
目前，在构建单页面Vue CLI应用程序时，将构建包含所有依赖项的单个供应商块。我正在寻找一种方法来提取特定的依赖关系到一个单独的供应商文件，这样你就会有两个。所以在构建之后，它看起来会像这样： dist/js/chunk-vendors.12344566.js 479.34 KiB
dist/js/chunk-vendors-jquery.222e1476.js 138.17 KiB Laravel mix似乎提供了similar fu
浏览 50提问于2020-10-14得票数 1
1回答
背景
我们使用Docker来封装Vue.js应用程序，并用源代码挂载卷。
Dockerfile
FROM node:13.8-alpine
RUN yarn install && \
apk add --no-cache git
COPY . /usr/src/app
WORKDIR /usr/src/app
EXPOSE 8080
CMD ['/bin/sh', 'start_compose.sh']
docker-compose.yml
version: '3'
services:
web:
build:
浏览 4提问于2020-02-26得票数 2
回答已采纳
也许我是瞎子，但我在或上什么也看不见。也许唯一的办法是卸载它然后重新安装它？
浏览 2提问于2019-11-27得票数 0
回答已采纳
我想在vue js项目中生成基于路由的sitemap，但我找不到任何解决方案？我在npm中发现了vue-router-sitemap包，但它没有提到任何示例，我完全迷惑了？这个问题的解决方案是什么？不管怎样，有没有办法访问另一个普通的js文件中的routes对象？这是一个例子，但什么是应用程序！我该如何使用它们呢？ // sitemapMiddleware.js import VueRouterSitemap from 'vue-router-sitemap';
import path from 'path';
im
浏览 26提问于2020-04-24得票数 3
我使用Vue CLI3生成了Vue.js项目，并使用@ alias.When编写了导入语句I execute npm run build，an import error happen.Why？
错误消息
$ npm run build
> vuejs-exercises@0.1.0 build /Users/???/Desktop/example
> vue-cli-service build
⠙ Building for production...Starting type checking and linting service...
Using 1 worker wi
浏览 3提问于2019-04-30得票数 3
1回答
当您构建一个vue项目时，dist文件夹中的资产将获得一个用于ex的指纹/块散列号。"thumb.jpg“变成了”thhum.23423432.jpg“，同样适用于css文件，js等。
是否可以仅对图像文件禁用构建时的散列？如果是这样，如何在vue.config.js文件中执行此操作？
浏览 4提问于2019-03-28得票数 1
我有一个典型的带有Vue.js后端的NodeJS应用程序。为了进行身份验证(在本例中为: CAS)，我决定通过后端提供前端。换言之：
在目标服务器上，只有一个应用程序(节点服务器)
以/api/开头的路由将提供后端路由(例如，用于前端的REST )
以/client/开头的路由将作为服务器上client目录中的静态内容提供给客户端。
在此设置之前，我曾经拥有：
为REST提供服务的节点服务器
(Apache) web服务器文档根中的一个文件夹，该文件夹提供Vue.js前端(作为静态HTML/JS/CSS文件)
与“拥有Apache和Node”相比，“一个服务
浏览 1提问于2019-07-09得票数 1
1回答
Vue cli3分块特定文件
、、、、
我有一个使用vue-cli3构建的项目，出于IIS的原因，我想挑选出一个特定的文件进行分块。目前，webpack基于默认设置进行分块。块也是从我在vue-router中的动态导入自动创建的。
我如何挑选出我想要单独分块的特定文件(config.js)？
文件结构：
src
----components
----helpers
--------config.js
--------file2.js
--------file3.js
----views
----etc
因此，在helpers目录中，我希望将config.js文件分块出来，而不是缩小它。这是一个很小的配置文件，我需要在安装到服务器时对
浏览 1提问于2019-08-08得票数 0
使用ionic和capacitor构建PWA。我刚刚将我的iPhone更新为iOS 15.1。在为生产而构建时，我注意到状态栏是绿色的。我将我的apple-mobile-web-app-status-bar-style更改为black-transculent。再次构建应用程序，添加到主屏幕，但状态栏仍然是绿色的。 我检查了我的manifest.json文件，注意到theme_color属性被设置为#4DBA87。我查了一下这个颜色，发现它和我的状态栏上的绿色完全一样。将此颜色更改为#FFFFFF再次构建应用程序，添加到主屏幕，但我的状态栏仍然保持绿色。 我现在有点不知所措了。我已确保在每次构
浏览 130提问于2021-10-26得票数 0
回答已采纳
2回答
我对Vue和整个网络生态系统都比较陌生。
我一直在构建一个小应用程序，我决定使用YAML来存储数据，而不是JSON，这样我就可以使用注释了。
我尝试了这两个YAML解析器：
(试图通过NPM安装)
(试图通过使用vue ui访问的Vue GUI安装)
但是，当我运行vue serve时，两者都有相同的问题。
error in ./assets/data.yaml
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle
浏览 38提问于2020-11-14得票数 2
我使用的是NodeJs后端服务器，对于我的前端web应用程序，我使用的是Vue-CLI。后端位于localhost的一个端口上，前端应用程序位于开发模式的另一个端口上。
我试图通过使用web-push npm和Vue CLI附带的服务工作人员来实现推送通知。然而，我不知道我应该把eventListener放在哪里'push'。
我尝试在(前端/)主dir中创建一个名为service-worker.js的文件( registerServiceWorker.js位于其中)。在下面的代码中，我只是将eventListener抛到registerServiceWorker.js文件中。
浏览 0提问于2019-03-28得票数 1
2回答
我使用的是vue-cli v3.0.0.beta 10+默认集成工作框，我在我的vue.config.js文件中添加了以下配置(位于我的根文件夹中)：
pwa: {
//pwa configs...
workboxOptions: {
// ...other Workbox options...
runtimeCaching: [ {
urlPattern: new RegExp('/.*(?:googleapis)\.com.*$/'),
handler: '
浏览 0提问于2018-05-15得票数 0
回答已采纳
3回答
我的应用程序被分成API和UI部分。部署策略要求他们共享一个package.json。文件结构看起来像
client/
src/
main.js
api/
package.json
vue.config.js
我正在使用标准的vue-cli脚本。
package.json
"scripts": {
"serve:ui": "vue-cli-service serve",
"build:ui": "vue-cli-service build",
"lint:ui
浏览 2提问于2018-10-16得票数 11
回答已采纳
我的vue项目已经完成。当我运行脚本‘’，即'vue-cli-service构建‘时，我可以得到一包输出文件。但是在index.html文件中，所有js和css文件的路径都不正确。例如：
<script src=js/chunk-vendors.40fba41b.js>
正确的一个应该是：
<script src="./js/chunk-vendors.40fba41b.js">
我谷歌了很多。有人说修改webpack的配置，我发现这是不可能的，因为vue-cli3不提供这样的配置文件。一些人说，可以通过在vue.config.js文件中添加ba
浏览 0提问于2018-11-30得票数 2
回答已采纳
为什么不能在vue.config.js文件中工作？
例如：
import * as path from 'path';
import * as pjson from './package.json';
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.join(__dirname, '/src'), // Alias @ to /src folder for ES/TS imports
},
浏览 0提问于2019-12-18得票数 13
我希望每种语言都有一个不同的版本。翻译后的字符串将放入不同的构建中：
/dist
app-en.js
app-nl.js
app-de.js
我知道在webpack.config.js中，您可以执行以下操作：
module.exports = [configA, configB]
它将在configA和configB的基础上构建两个版本的应用程序。
我的项目是基于vue-cli的，所以我没有webpack.config.js，只有vue.config.js。
在vue.config.js中，您可以在configureWebpack中提供webpack配置，但这必须是一个
浏览 0提问于2018-10-23得票数 1
回答已采纳
我用vue-cli创建了一个新网站。我正在使用开发服务器为页面服务。当我在浏览器中查看页面时，我看到浏览器控制台中出现了两种类型的错误：
GET http://172.31.7.153:4000/sockjs-node/info?t=1555922702538 net::ERR_CONNECTION_TIMED_OUT
GET http://localhost:4000/sockjs-node/info?t=1555922708541 net::ERR_CONNECTION_REFUSED
我不知道它意味着什么，也不知道它是如何/为什么被调用的，它大约每5秒重复出现一次。
浏览 3提问于2019-04-18得票数 34
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
