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

最新推荐文章于 2025-06-11 16:58:48 发布

胖达抡键盘

最新推荐文章于 2025-06-11 16:58:48 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript webpack

本文链接：https://blog.youkuaiyun.com/weixin_52485890/article/details/125908264

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发环境只需要执行【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