[英]How to ignore devServer settings in vue.config.js when building for staging environment?
I'm building an app with Vue.我正在用 Vue 构建一个应用程序。 I needed
https
working on my local environment for dev and testing purposes.我需要
https
在我的本地环境中工作以进行开发和测试。 I successfully created the necessary certificates following this tutorial .我按照本教程成功创建了必要的证书。 To get the dev server to use them I copied the
server.key
and server.crt
files into the root of my project and left the rootCA.pem
file in ~/.ssh
.为了让开发服务器使用它们,我将
server.key
和server.crt
文件复制到我的项目的根目录中,并将rootCA.pem
文件留在~/.ssh
。 I added an entry in /etc/hosts
to alias localhost for my domain like:我在
/etc/hosts
中为我的域添加了一个别名 localhost 的条目,例如:
127.0.0.1 example.test
I then edited vue.config.js
in the root of my project to look like:然后我在我的项目的根目录中编辑了
vue.config.js
,如下所示:
const fs = require('fs')
module.exports = {
devServer: {
host: 'example.test',
https: {
key: fs.readFileSync('./server.key'),
cert: fs.readFileSync('./server.crt'),
ca: fs.readFileSync(process.env.HOME + '/.ssh/rootCA.pem')
}
}
}
This works great locally.这在本地效果很好。 My problem is on my staging server.
我的问题出在我的临时服务器上。
My staging server is running ubuntu (16.04) and has an actual SSL cert (ie not self-signed) installed using certbot
(LetsEncrypt).我的登台服务器正在运行 ubuntu (16.04) 并使用
certbot
(LetsEncrypt) 安装了实际的 SSL 证书(即非自签名)。 My project is a static frontend so I am serving it with nginx
configured to point to the /dist
directory and make the project available at staging.example.com
.我的项目是一个静态前端,因此我使用配置为指向
/dist
目录的nginx
为其提供服务,并使该项目在staging.example.com
可用。 This was all working fine before I added the devServer
config in vue.config.js
above.这是所有工作正常之前,我添加了
devServer
在配置vue.config.js
以上。
When I build the project for staging, ie当我构建用于登台的项目时,即
npm run build -- --mode staging
I expected it to ignore the devServer
config section since NODE_ENV === 'production'
(set in my .env.staging
file).我希望它忽略
devServer
配置部分,因为NODE_ENV === 'production'
(在我的.env.staging
文件中设置)。
The build process fails, complaining that:构建过程失败,抱怨:
Error loading vue.config.js:
Error: ENOENT: no such file or directory, open './server.key'
devServer
section of vue.config.js
when building for "staging" or "production?"devServer
的部分vue.config.js
建设“升级”或者“生产?”vue.config.js
doesn't automatically detect the environment. vue.config.js
不会自动检测环境。 As it says in the Vue CLI configuration docs :正如Vue CLI 配置文档中所说:
If you need conditional behavior based on the environment, or want to directly mutate the config, use a function (which will be lazy evaluated after the env variables are set).
如果您需要基于环境的条件行为,或者想直接改变配置,请使用一个函数(在设置 env 变量后将对其进行延迟评估)。 The function receives the resolved config as the argument.
该函数接收解析的配置作为参数。 Inside the function, you can either mutate the config directly, OR return an object which will be merged.
在函数内部,你可以直接改变配置,或者返回一个将被合并的对象。
How to actually do this was not immediately clear to me.如何真正做到这一点对我来说并不是很清楚。 Here's what ended up working:
这是最终的工作:
const fs = require('fs')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') {
config.devServer = {
host: 'qzuku.test',
// https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec
https: {
key: fs.readFileSync('./qzukuDevServer.key'),
cert: fs.readFileSync('./qzukuDevServer.crt'),
ca: fs.readFileSync(process.env.HOME + '/.ssh/rootDevCA.pem')
}
}
}
}
}
Hope this helps!希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.