Vue本地开发环境配置及上线部署

最新推荐文章于 2025-10-01 07:11:00 发布

原创

最新推荐文章于 2025-10-01 07:11:00 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #webpack

本文介绍了Vue项目的本地开发环境配置，通过`npm run serve`启动服务，并讲解了如何解决跨域问题。在正式部署时，需使用`npm run build`生成dist文件夹，然后将其上传至web服务器如tomcat或IIS。当存在后端服务时，可能出现404错误，此时可通过nginx的反向代理配置进行请求转发。

开发环境只需要执行【npm run serve】即可启动服务。

如果需要跨域访问，可以通过配置vue.config.js的devServer解决。

该设置在正式环境是无效的。

*
 * Vue-CLI项目的核心配置文件
 */
const webpack = require('webpack')
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

const path = require('path')
const resolve = dir => {
    return path.join(__dirname, dir);
};

module.exports = {
    // vue cli3.3之后废除了baseUrl,在这之后需要使用 publicPath
    publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
    chainWebpack: config => {
        config.plugin('jquery').use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }])
        config.plugin('monaco-editor').use(MonacoWebpackPlugin, [{}])
    },
    devServer: {
        before(app) {
        },
        open: true,
        https: false,
        // host: 'localhost',
        // port: 8081,
        proxy: {
            '/prms/api': {
                target: 'http://localhost:80

最低0.47元/天解锁文章